Added database snapshots, cleanup, better error messages.

Allows Paskia to authenticate the user to a client site.
- User friendly client registration flow on the admin app
- Redirect-based authentication flow (per spec)
- Backchannel logout both ways to keep sessions synchronized
- Groups integrated with Paskia's permission system
- Adds email, preferred username and telephone fields on user profile
- All new user basic info layout to show the new information, better looks
- API and DB structures redesigned
- Various unrelated fixes to theming and layout

.gitignore

@@ -3,7 +3,10 @@ dist/
 .*
 !.gitignore
 *.lock
-passkey-auth.sqlite
+package-lock.json
-/passkey/frontend-build
+paskia.sqlite
-/test_*.py
+*.paskiadb
-passkey/_version.py
+/paskia/frontend-build
+/paskia/_version.py
+coverage-html/
+e2e/coverage-frontend/

API.md

@@ -1,28 +0,0 @@
-# PassKey Auth API Documentation
-
-This document describes all API endpoints available in the PassKey Auth FastAPI application, that by default listens on `localhost:4401` ("for authentication required").
-
-### HTTP Endpoints
-
-GET /auth/ - Main authentication app
-GET /auth/admin/ - Admin app for managing organisations, users and permissions
-GET /auth/{reset_token} - Process password reset/share token
-POST /auth/api/user-info - Get authenticated user information
-POST /auth/api/logout - Logout and delete session
-POST /auth/api/set-session - Set session cookie from Authorization header
-POST /auth/api/create-link - Create device addition link
-DELETE /auth/api/credential/{uuid} - Delete specific credential
-POST /auth/api/validate - Session validation and renewal endpoint (fetch regularly)
-GET /auth/api/forward - Authentication validation for Caddy/Nginx
-		- On success returns `204 No Content` with [user info](Headers.md)
-		- Otherwise returns
-		   * `401 Unauthorized` - authentication required
-		   * `403 Forbidden` - missing required permissions
-		   * Serves the authentication app for a login or permission denied page
-		- Does not renew session!
-
-### WebAuthn/Passkey endpoints (WebSockets)
-
-WS /auth/ws/register - Register new user with passkey
-WS /auth/ws/add_credential - Add new credential for existing user
-WS /auth/ws/authenticate - Authenticate user with passkey

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,129 +1,232 @@
-# PasskeyAuth
+# Paskia
 
-A minimal FastAPI WebAuthn server with WebSocket support for passkey registration. This project demonstrates WebAuthn registration flow with Resident Keys (discoverable credentials) using modern Python tooling.
+![Login dialog screenshot](https://git.zi.fi/leovasanko/paskia/raw/main/docs/screenshots/login-light.webp)
 
-## Features
+An easy to install passkey-based authentication service that protects any web application with strong passwordless login.
 
-- 🔐 WebAuthn registration with Resident Keys support
+## What is Paskia?
-- 🔌 WebSocket-based communication for real-time interaction
-- 🚀 Modern Python packaging with `pyproject.toml`
-- 🎨 Clean, responsive HTML interface using @simplewebauthn/browser
-- 📦 No database required - challenges stored locally per connection
-- 🛠️ Development tools: `ruff` for linting and formatting
-- 🧹 Clean architecture with local challenge management
 
-## Docs
+- Easy to use fully featured auth&auth system (login and permissions)
+- Organization and role-based access control
+   * Org admins control their users and roles
+   * 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.
 
-- Caddy integration: see `CADDY.md` for short, copy-paste snippets to secure your site with Caddy.
+## Authenticate to get to your app, or in your app
 
-## Requirements
+- API fetch: auth checks and login without leaving your app
+- Forward-auth proxy: protect any unprotected site or service (Caddy, Nginx)
 
-- Python 3.9+
+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.
-- A WebAuthn-compatible authenticator (security key, biometric device, etc.)
+
+## 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 (editable dev mode)
+Install [UV](https://docs.astral.sh/uv/getting-started/installation/) and run:
 
 ```fish
-uv pip install -e .[dev]
+uvx paskia --rp-id example.com
 ```
 
-### Run (new CLI)
+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`.
 
-`passkey-auth` now provides subcommands:
+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
+uv tool install paskia
+```
+
+## Configuration
+
+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
-passkey-auth serve [host:port] [--options]
+paskia [options]
-passkey-auth dev   [--options]
 ```
 
-Examples (fish shell shown):
+| 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) |
+
+To clear a stored setting, pass an empty value like `--auth-host=`. The database is stored in `{rp-id}.paskiadb` in current directory. This can be overridden by environment `PASKIA_DB` if needed.
+
+## Tutorial: From Local Testing to Production
+
+This section walks you through a complete example, from running Paskia locally to protecting a real site in production.
+
+### Step 1: Local Testing
+
+For development and testing, run Paskia without any arguments:
 
 ```fish
-# Production style (no reload)
+paskia
-passkey-auth serve
-passkey-auth serve 0.0.0.0:8080 --rp-id example.com --origin https://example.com
-
-# Development (auto-reload)
-passkey-auth dev            # localhost:4401
-passkey-auth dev :5500      # localhost on port 5500
-passkey-auth dev 127.0.0.1  # host only, default port 4401
 ```
 
-Available options (both subcommands):
+This starts the server on [localhost:4401](http://localhost:4401) with passkeys bound to `localhost`. On first run, Paskia prints a registration link for the Master Admin—click it to register your first passkey.
 
-```text
+### Step 2: Production Configuration
---rp-id <id>        Relying Party ID (default: localhost)
---rp-name <name>    Relying Party name (default: same as rp-id)
---origin <url>      Explicit origin (default: https://<rp-id>)
-```
 
-### Legacy Invocation
+For a real deployment, configure Paskia with your domain name (rp-id). This enables SSO setup for that domain and any subdomains.
-
-If you previously used `python -m passkey.fastapi --dev --host ...`, switch to the new form above. The old flags `--host`, `--port`, and `--dev` are replaced by the `[host:port]` positional and the `dev` subcommand.
-
-## Usage (Web)
-
-1. Start the server with one of the commands above
-2. Open your browser to `http://localhost:4401/auth/` (or your chosen host/port)
-3. Enter a username (or use the default)
-4. Click "Register Passkey"
-5. Follow your authenticator's prompts
-
-Real-time status updates stream over WebSocket.
-
-## Development
-
-### Code Quality
 
 ```fish
-# Run linting and formatting with ruff
+paskia --rp-id=example.com --rp-name="Example Corp" --save
-uv run ruff check .
-uv run ruff format .
-
-# Or with hatch
-hatch run ruff check .
-hatch run ruff format .
 ```
 
-### Project Structure
+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). The `--save` option stores these settings in the database, so future runs only need `paskia --rp-id example.com`, of which we will make use of with the systemd config later on.
 
-```
+### Step 3: Set Up Caddy
-passkeyauth/
+
-├── passkeyauth/
+Install [Caddy](https://caddyserver.com/) and copy the [auth folder](caddy/auth) to `/etc/caddy/auth`. Say your current unprotected Caddyfile looks like this:
-│   ├── __init__.py
+
-│   └── main.py          # FastAPI server with WebSocket support
+```caddyfile
-├── static/
+app.example.com {
-│   └── index.html       # Frontend interface
+    reverse_proxy :3000
-├── pyproject.toml       # Modern Python packaging configuration
+}
-└── README.md
 ```
 
-## Technical Details
+Add Paskia full site protection:
 
-### WebAuthn Configuration
+```caddyfile
+app.example.com {
+    import auth/setup
+    handle {
+        import auth/require perm=myapp:login
+        reverse_proxy :3000
+    }
+}
+```
 
-- **Relying Party ID**: `localhost` (for development)
+Run `systemctl reload caddy`. Now `app.example.com` requires the `myapp:login` permission. Try accessing it and you'll land on a login dialog.
-- **Resident Keys**: Required (enables discoverable credentials)
-- **User Verification**: Preferred
-- **Supported Algorithms**: ECDSA-SHA256, RSASSA-PKCS1-v1_5-SHA256
 
-### WebSocket Message Flow
+### Step 4: Assign Permissions via Admin Panel
 
-1. Client connects to `/ws/{client_id}`
+![Admin panel permissions](https://git.zi.fi/leovasanko/paskia/raw/main/docs/screenshots/master-permissions.webp)
-2. Client sends `registration_challenge` message
-3. Server responds with `registration_challenge_response`
-4. Client completes WebAuthn ceremony and sends `registration_response`
-5. Server verifies and responds with `registration_success` or `error`
 
-### Security Notes
+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
 
-- This is a minimal demo - challenges are stored locally per WebSocket connection
+Now you have granted yourself the new permission.
-- For production use, implement proper user storage and session management
-- Consider using Redis or similar for challenge storage in production with multiple server instances
-- Ensure HTTPS in production environments
 
-## License
+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).
 
-MIT License - feel free to use this as a starting point for your own WebAuthn implementations!
+### Step 5: 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 6: Run Paskia as a Service
+
+Create a system user paskia, install UV on the system, and create a systemd unit:
+
+```fish
+sudo useradd --system --home-dir /srv/paskia --create-home paskia
+curl -LsSf https://astral.sh/uv/install.sh | sudo env UV_INSTALL_DIR=/usr/local/bin 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 --rp-id=%i
+
+[Install]
+WantedBy=multi-user.target
+```
+
+Then enable and start, view output for registration link:
+
+```fish
+sudo systemctl enable --now paskia@example.com && sudo journalctl -u paskia@example.com -f -n 30 -o cat
+```
+
+### Optional: Dedicated Authentication Site
+
+By default, Paskia serves login dialogs and admin interface at the `/auth/` path on each protected site. For a cleaner setup, you can use a dedicated authentication subdomain instead. We assume you have your DNS setup for that domain or a wildcard of all subdomains to current machine.
+
+Configure Paskia with the authentication host:
+
+```fish
+paskia --rp-id example.com --auth-host=auth.example.com --save
+```
+
+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. No other changes are needed. Your existing protected sites continue to work as before but they just forward to the dedicated site for user profile and other such functionality.
+
+
+
+## Further Documentation
+
+- [Caddy configuration](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/Caddy.md)
+- [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)

caddy/Caddyfile.dev

@@ -0,0 +1,10 @@
+localhost {
+	# Forwards API by caddy, bypassing the Vite dev proxy
+	# Avoids bug https://github.com/oven-sh/bun/issues/9882
+	handle /api/* {
+		reverse_proxy :4402   # directly to backend
+	}
+	handle {
+		reverse_proxy :4403   # vite dev server
+	}
+}

docs/API.md

@@ -0,0 +1,64 @@
+# Paskia API
+
+For integrating Paskia with your app frontend, see [integration](Integration.md).
+
+## Web Interface
+
+| Method | Path | What it is for | Notes |
+|---:|---|---|---|
+| GET | `/auth/` | User profile page | |
+| GET | `/auth/admin/` | Admin panel | Requires auth:admin (master) or org admin permissions. |
+| GET | `/auth/{token}` | Reset / add credential URL (QR code link) | E.g. `/auth/fun.cotton.fresh.xray.lava` |
+
+### Public JSON API: `/auth/api/*`
+
+| Method | Path | Used for | Notes |
+|---:|---|---|---|
+| GET | `/auth/api/settings` | Paskia configuration | Returns RP info + base paths + session cookie name |
+| GET | `/auth/api/user-info` | Full user profile | Basic information, credentials, sessions, permissions |
+| POST | `/auth/api/logout` | Terminate session and delete session cookie | Signs out of the current site |
+| POST | `/auth/api/validate` | Validate and renew session cookie | Optional query: `perm=` (repeatable), `max_age=` |
+| GET | `/auth/api/forward` | Validate access (Caddy/Nginx) | 204 on success; 401/403 otherwise (HTML if requested) |
+
+The `validate` and `forward` endpoints take query arguments `perm=` and `max_age=` for specific requirements on the validation of the current session.
+
+### User JSON API: `/auth/api/user/*`
+
+| Method | Path | Used for | Notes |
+|---:|---|---|---|
+| PUT | `/auth/api/user/display-name` | Update the user’s display name | Body: JSON `{ "display_name": "..." }` |
+| POST | `/auth/api/user/logout-all` | Terminate all user sessions | Clears current host cookie |
+| DELETE | `/auth/api/user/session/{session_id}` | Terminate one session | Session IDs are server-issued |
+| DELETE | `/auth/api/user/credential/{uuid}` | Delete a credential | Requires recent authentication |
+| POST | `/auth/api/user/create-link` | Create a device-add link | Requires recent authentication |
+
+These are used mostly from the user profile panel and modify the current user.
+
+### 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.
+
+### 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 (e.g. admin UI at `/admin/`), and the `/auth/...` equivalents (e.g. `/auth/admin/`) redirect to the 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
+- `/auth/api/*` is served normally.
+- `/auth/api/user/*`, `/auth/api/admin/*`, and `/auth/ws/*` don't exist.

docs/Caddy.md

@@ -0,0 +1,79 @@
+# Paskia Caddy Configuration
+
+[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/Headers.md

@@ -0,0 +1,23 @@
+# Paskia Trusted Headers for Backend Apps
+
+| 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 our [Caddy configuration](Caddy.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,198 @@
+# Integrating Paskia with your App
+
+This guide covers frontend and backend integration with Paskia. For Caddy forward-auth setup, see [Caddy configuration](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` 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 Caddy forward-auth, your backend receives `Remote-*` headers on authenticated requests. See [Headers](Headers.md) for the full list.
+
+```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
+
+Your backend can validate sessions directly by calling Paskia's validate endpoint:
+
+```python
+import httpx
+
+async def validate_session(request) -> dict:
+    """Validate a session cookie and check permissions."""
+    authcookie = request.get("__Host-paskia")
+    response = await httpx.post(
+        "http://localhost:4401/auth/api/validate?perm=myapp:login+myapp:api",
+        headers={
+            "Host": request.headers["host"]
+            "X-Forwarded-For": request.client.host,
+            "Cookie": f"__Host-paskia={}",
+        },
+    )
+    if response.status_code != 200:
+        return response.json()  # Return to client
+    # User authenticated... We are good to go!
+    ctx = response.json()  # User and session information
+```
+
+This is useful for:
+- WebSocket connections where headers aren't available after handshake
+- Background jobs that need to verify a stored session
+- APIs not behind forward-auth (auth/restrict)
+
+### Validate Endpoint Parameters
+
+`POST /auth/api/validate` accepts query parameters:
+
+| Parameter | Description |
+|-----------|-------------|
+| `perm=scope:name` | Require this permission (repeatable) |
+| `max_age=5min` | Require recent passkey use |
+
+Returns 200 with user info on success, 401/403 on failure.
+
+## 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 Caddy or Nginx.
+
+### 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.

e2e/.gitignore

@@ -0,0 +1,13 @@
+# Dependencies
+node_modules/
+
+# Test artifacts
+test-data/
+test-results/
+playwright-report/
+
+# Playwright
+.playwright/
+
+# Bun
+bun.lockb

e2e/README.md

@@ -0,0 +1,167 @@
+# Paskia E2E Tests
+
+End-to-end tests for Paskia using [Playwright](https://playwright.dev/) with Chrome's **Virtual Authenticator**.
+
+## Overview
+
+These tests exercise the complete WebAuthn/passkey authentication flow without requiring physical hardware. Chrome's DevTools Protocol provides a virtual authenticator that can:
+
+- Generate passkey credentials
+- Sign authentication challenges
+- Store resident keys (discoverable credentials)
+- Simulate user verification (biometrics/PIN)
+
+## Prerequisites
+
+- Node.js 18+
+- Python with `uv` (for running the backend server)
+
+## Setup
+
+```bash
+cd e2e
+npm install
+npm run install:browsers
+```
+
+## Running Tests
+
+### Basic Test Run
+
+```bash
+npm test
+```
+
+This will:
+1. Start a fresh Paskia server with a test database
+2. Run all E2E tests against it
+3. Clean up the server when done
+
+### With Coverage
+
+```bash
+npm run test:coverage
+```
+
+Runs tests and collects coverage for both:
+- **Python backend** (via `coverage.py`) - HTML report in `coverage-html/`
+- **Frontend JavaScript** (via Chrome V8 coverage) - JSON data in `e2e/coverage-frontend/`
+
+### Interactive Mode
+
+```bash
+npm run test:ui
+```
+
+Opens Playwright's UI mode for interactive test debugging.
+
+### Headed Mode
+
+```bash
+npm run test:headed
+```
+
+Runs tests with a visible browser window.
+
+### Debug Mode
+
+```bash
+npm run test:debug
+```
+
+Runs tests with Playwright Inspector for step-by-step debugging.
+
+## Test Structure
+
+```
+e2e/
+├── playwright.config.ts      # Playwright configuration
+├── package.json
+├── tsconfig.json
+├── test-data/                # Test database (created at runtime)
+│   └── test.sqlite
+└── tests/
+    ├── global-setup.ts       # Creates fresh DB, captures reset token
+    ├── global-teardown.ts    # Cleanup
+    ├── passkey.spec.ts       # Main E2E tests
+    └── fixtures/
+        ├── virtual-authenticator.ts  # Virtual authenticator setup
+        └── passkey-helpers.ts        # WebSocket helpers
+```
+
+## What's Tested
+
+### Registration Flow
+- Bootstrap admin user registration via reset token
+- WebSocket challenge-response with virtual authenticator
+- Session token creation and validation
+
+### Authentication Flow
+- Passkey authentication via WebSocket
+- Credential verification
+- Session management
+
+### Session Management
+- Token validation (`/auth/api/validate`)
+- User info retrieval (`/auth/api/user-info`)
+- Logout (`/auth/api/logout`)
+- Invalid/missing token rejection
+
+## How Virtual Authenticator Works
+
+The tests use Chrome DevTools Protocol (CDP) to create a virtual authenticator:
+
+```typescript
+const cdpSession = await page.context().newCDPSession(page)
+await cdpSession.send('WebAuthn.enable')
+await cdpSession.send('WebAuthn.addVirtualAuthenticator', {
+  options: {
+    protocol: 'ctap2',
+    transport: 'internal',
+    hasResidentKey: true,
+    hasUserVerification: true,
+    isUserVerified: true,
+    automaticPresenceSimulation: true,
+  },
+})
+```
+
+This creates an in-browser authenticator that:
+- Automatically responds to WebAuthn prompts
+- Stores credentials persistently during the test session
+- Simulates user verification without actual biometric input
+
+## Environment Variables
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `BASE_URL` | Server URL | `http://localhost:4404` |
+| `CI` | CI environment flag | - |
+| `CLEANUP_TEST_DB` | Remove test DB after run | `false` |
+
+## Limitations
+
+1. **Chromium only**: Virtual authenticator is a Chrome DevTools feature
+2. **No cross-origin**: Tests run on localhost; production-like origins need additional setup
+3. **Single user per run**: Bootstrap creates one admin user; additional users need admin API
+
+## Debugging Tips
+
+1. **Check test database**: `e2e/test-data/test.sqlite` persists after tests
+2. **View server output**: Global setup echoes server bootstrap to console
+3. **Use trace viewer**: `npx playwright show-trace` on failure traces
+
+## CI Integration
+
+The tests are designed for CI environments:
+
+```yaml
+- name: Run E2E Tests
+  run: |
+    cd e2e
+    npm ci
+    npm run install:browsers
+    npm test
+  env:
+    CI: true
+```

e2e/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "paskia-e2e",
+  "version": "1.0.0",
+  "private": true,
+  "description": "E2E tests for Paskia using Playwright with Virtual Authenticator",
+  "type": "module",
+  "scripts": {
+    "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/node": "*",
+    "c8": "^10.1.3"
+  }
+}

e2e/playwright.config.js

@@ -0,0 +1,50 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Playwright configuration for Paskia E2E tests.
+ * Uses Chrome's Virtual Authenticator for automated passkey testing.
+ *
+ * Run with: npm test
+ */
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: false, // Run tests sequentially for passkey state consistency
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1, // Single worker for database state consistency
+  reporter: [
+    ['html', { open: 'never' }],
+    ['list']
+  ],
+
+  // Global setup/teardown for test database and server
+  globalSetup: './tests/global-setup.ts',
+  globalTeardown: './tests/global-teardown.ts',
+
+  use: {
+    // Base URL for the Paskia server
+    baseURL: process.env.BASE_URL || 'http://localhost:4404',
+
+    // Collect trace on failure for debugging
+    trace: 'on-first-retry',
+
+    // Screenshot on failure
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        // Chrome-specific settings for virtual authenticator
+        launchOptions: {
+          args: [
+            '--enable-features=WebAuthenticationEnterpriseAttestation',
+          ],
+        },
+      },
+    },
+  ],
+})

e2e/playwright.config.ts.bak

@@ -0,0 +1,50 @@
+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
+ */
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: false, // Run tests sequentially for passkey state consistency
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1, // Single worker for database state consistency
+  reporter: [
+    ['html', { open: 'never' }],
+    ['list']
+  ],
+
+  // Global setup/teardown for test database and server
+  globalSetup: './tests/global-setup.ts',
+  globalTeardown: './tests/global-teardown.ts',
+
+  use: {
+    // Base URL for the Paskia server
+    baseURL: process.env.BASE_URL || 'http://localhost:4401',
+
+    // Collect trace on failure for debugging
+    trace: 'on-first-retry',
+
+    // Screenshot on failure
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        // Chrome-specific settings for virtual authenticator
+        launchOptions: {
+          args: [
+            '--enable-features=WebAuthenticationEnterpriseAttestation',
+          ],
+        },
+      },
+    },
+  ],
+})

e2e/tests/10-passkey.spec.ts

@@ -0,0 +1,635 @@
+import { test, expect, createVirtualAuthenticator } from './fixtures/virtual-authenticator'
+import {
+  registerPasskey,
+  authenticatePasskey,
+  validateSession,
+  getUserInfo,
+  logout,
+  getBootstrapResetToken,
+  createDeviceLink,
+  getSessionCookieName,
+  saveSessionToken,
+  getSavedSessionToken,
+  saveDeviceTokens,
+} from './fixtures/passkey-helpers'
+import type { Page, BrowserContext } from '@playwright/test'
+
+/**
+ * Helper to set up session cookie for a page.
+ */
+async function setupSessionCookie(page: Page, sessionToken: string): Promise<void> {
+  const cookieName = getSessionCookieName()
+  await page.context().addCookies([{
+    name: cookieName,
+    value: sessionToken,
+    domain: 'localhost',
+    path: '/',
+    secure: true,
+    httpOnly: true,
+    sameSite: 'Strict' as const,
+  }])
+}
+
+/**
+ * E2E tests for Paskia using Chrome's Virtual Authenticator.
+ *
+ * These tests exercise the complete WebAuthn flow:
+ * 1. Registration via WebSocket using bootstrap reset token
+ * 2. Authentication via WebSocket
+ * 3. Session validation
+ * 4. User info retrieval
+ * 5. Logout
+ *
+ * The virtual authenticator simulates a hardware passkey device,
+ * allowing fully automated testing without physical hardware.
+ */
+
+test.describe('Passkey Authentication E2E', () => {
+  const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+  test.describe.configure({ mode: 'serial' })
+
+  // Shared state across tests in this describe block
+  let sessionToken: string
+  let userUuid: string
+  let credentialUuid: string
+  let resetToken: string | undefined
+
+  test.beforeAll(() => {
+    // Get the bootstrap reset token from global setup
+    resetToken = getBootstrapResetToken()
+    if (!resetToken) {
+      console.warn('⚠️ No reset token found - registration test may fail')
+    } else {
+      console.log(`📝 Using reset token: ${resetToken}`)
+    }
+  })
+
+  test('should load the auth page', async ({ page }) => {
+    // Navigate to auth page to establish origin for WebAuthn
+    await page.goto('/auth/')
+    await expect(page).toHaveTitle(/.*/)
+
+    // Page should load - 401 errors are expected since user is not logged in
+    await page.waitForTimeout(500)
+
+    // Take screenshot of the login view
+    await page.screenshot({ path: 'test-results/login-view.png' })
+    console.log('✓ Screenshot saved: test-results/login-view.png')
+
+    // Just verify the page loaded without JS errors (network 401s are OK)
+    console.log('✓ Auth page loaded successfully')
+  })
+
+  test('should register admin passkey via WebSocket using reset token', async ({ page, virtualAuthenticator }) => {
+    test.skip(!resetToken, 'No reset token available from bootstrap')
+
+    // Must visit the page first to establish origin
+    await page.goto('/auth/')
+
+    // Perform registration via WebSocket with virtual authenticator
+    // Using the bootstrap reset token for the admin user
+    const result = await registerPasskey(page, baseUrl, {
+      resetToken: resetToken,
+      displayName: 'Admin User',
+    })
+
+    // Verify registration result
+    expect(result.session_token).toBeDefined()
+    expect(result.session_token).toHaveLength(16)
+    expect(result.user).toBeDefined()
+    expect(result.credential).toBeDefined()
+    expect(result.message).toContain('successfully')
+
+    // Store for subsequent tests
+    sessionToken = result.session_token
+    userUuid = result.user
+    credentialUuid = result.credential
+
+    // Save session token for other test groups to use
+    saveSessionToken(sessionToken)
+
+    console.log(`✓ Registered user: ${userUuid}`)
+    console.log(`✓ Credential: ${credentialUuid}`)
+    console.log(`✓ Session token: ${sessionToken.substring(0, 4)}...`)
+  })
+
+  test('should create device tokens for other tests', async ({ page }) => {
+    test.skip(!sessionToken, 'Requires successful registration')
+
+    // Create a batch of device tokens for API tests to use
+    // Each API test needs its own token to register a passkey in its virtual authenticator
+    const tokenCount = 15  // Enough for all API tests
+    const tokens: string[] = []
+
+    for (let i = 0; i < tokenCount; i++) {
+      const deviceLink = await createDeviceLink(page, baseUrl, sessionToken)
+      tokens.push(deviceLink.token)
+    }
+
+    saveDeviceTokens(tokens)
+    console.log(`✓ Created ${tokens.length} device tokens for API tests`)
+  })
+
+  test('should validate the session token', async ({ page }) => {
+    // Skip if registration didn't run
+    test.skip(!sessionToken, 'Requires successful registration')
+
+    const validation = await validateSession(page, baseUrl, sessionToken)
+
+    expect(validation.valid).toBe(true)
+    expect(validation.ctx.user.uuid).toBe(userUuid)
+
+    console.log(`✓ Session validated for user: ${validation.ctx.user.uuid}`)
+  })
+
+  test('should retrieve user info', async ({ page }) => {
+    test.skip(!sessionToken, 'Requires successful registration')
+
+    const userInfo = await getUserInfo(page, baseUrl, sessionToken)
+
+    expect(userInfo.user.uuid).toBe(userUuid)
+    expect(userInfo.user.display_name).toBe('Admin User')
+    expect(userInfo.credentials).toBeDefined()
+    expect(Object.keys(userInfo.credentials).length).toBeGreaterThanOrEqual(1)
+
+    // Navigate to profile and take screenshot
+    const cookieName = getSessionCookieName()
+    await page.context().addCookies([{
+      name: cookieName,
+      value: sessionToken,
+      domain: 'localhost',
+      path: '/',
+      secure: true,
+      httpOnly: true,
+      sameSite: 'Strict' as const,
+    }])
+    await page.goto('/auth/')
+    await page.waitForSelector('[data-view="profile"]', { timeout: 5000 })
+    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.display_name}`)
+    console.log(`✓ Credentials count: ${Object.keys(userInfo.credentials).length}`)
+  })
+
+  test('should authenticate with existing passkey', async ({ page, virtualAuthenticator }) => {
+    test.skip(!sessionToken, 'Requires successful registration')
+
+    // Navigate to page (required for WebAuthn origin)
+    await page.goto('/auth/')
+
+    // The virtual authenticator in this context is new and doesn't have credentials.
+    // Create a device link using the current session, then register a new credential.
+    const deviceLink = await createDeviceLink(page, baseUrl, sessionToken)
+    console.log(`✓ Created device link with token: ${deviceLink.token}`)
+
+    // Register a new credential using the device link
+    const regResult = await registerPasskey(page, baseUrl, {
+      resetToken: deviceLink.token,
+      displayName: 'Admin User (test device)'
+    })
+
+    console.log(`✓ Added test credential: ${regResult.credential}`)
+
+    // Now logout and authenticate with the fresh credential
+    await logout(page, baseUrl, regResult.session_token)
+    console.log('✓ Logged out')
+
+    // Authenticate with the virtual authenticator (now has a valid credential)
+    const result = await authenticatePasskey(page, baseUrl)
+
+    expect(result.session_token).toBeDefined()
+    expect(result.session_token).toHaveLength(16)
+    expect(result.user).toBe(userUuid)
+
+    // Update session token for subsequent tests
+    sessionToken = result.session_token
+
+    // Save session token for other test groups to use
+    saveSessionToken(sessionToken)
+
+    console.log(`✓ Authenticated as user: ${result.user}`)
+    console.log(`✓ New session token: ${sessionToken.substring(0, 4)}...`)
+  })
+
+  test('should validate new session after authentication', async ({ page }) => {
+    test.skip(!sessionToken, 'Requires successful authentication')
+
+    const validation = await validateSession(page, baseUrl, sessionToken)
+
+    expect(validation.valid).toBe(true)
+    expect(validation.ctx.user.uuid).toBe(userUuid)
+
+    console.log(`✓ New session validated`)
+  })
+
+  // Note: Logout test moved to the end so other test groups can use the session
+})
+
+test.describe('Session Management', () => {
+  const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+  test('should reject invalid session token', async ({ page }) => {
+    const cookieName = getSessionCookieName()
+    const response = await page.request.post(`${baseUrl}/auth/api/validate`, {
+      headers: {
+        'Cookie': `${cookieName}=invalid_token_123`,
+      },
+      failOnStatusCode: false,
+    })
+
+    // Server may return 400 (bad format) or 401 (unauthorized)
+    expect([400, 401]).toContain(response.status())
+    console.log(`✓ Invalid token correctly rejected`)
+  })
+
+  test('should reject missing session token', async ({ page }) => {
+    const response = await page.request.post(`${baseUrl}/auth/api/validate`, {
+      failOnStatusCode: false,
+    })
+
+    expect(response.status()).toBe(401)
+    console.log(`✓ Missing token correctly rejected`)
+  })
+})
+
+test.describe('Device Addition Dialog', () => {
+  const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+  test.describe.configure({ mode: 'serial' })
+
+  let sessionToken: string
+
+  test.beforeAll(() => {
+    // Get the session token saved by the previous test group
+    // Note: This runs before the logout test, so the session should still be valid
+    const saved = getSavedSessionToken()
+    if (saved) {
+      sessionToken = saved
+    }
+  })
+
+  test('should open device addition dialog and show QR code', async ({ page }) => {
+    test.skip(!sessionToken, 'Requires saved session token from previous tests')
+
+    // Set the session cookie for this test context
+    const cookieName = getSessionCookieName()
+    await page.context().addCookies([{
+      name: cookieName,
+      value: sessionToken,
+      domain: 'localhost',
+      path: '/',
+      secure: true,
+      httpOnly: true,
+      sameSite: 'Strict',
+    }])
+
+    // Navigate to auth page (which should show profile when logged in)
+    await page.goto('/auth/')
+
+    // Wait for the profile view to load
+    await page.waitForSelector('[data-view="profile"]', { timeout: 5000 })
+
+    // Click the "Another Device" button
+    const addDeviceButton = page.getByRole('button', { name: 'Another Device' })
+    await expect(addDeviceButton).toBeVisible()
+    await addDeviceButton.click()
+
+    // Wait for the registration link modal to appear
+    const dialog = page.locator('.device-dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+
+    // Verify dialog contains expected elements
+    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')
+    await expect(qrCanvas).toBeVisible()
+
+    // Verify the link is displayed (text strips scheme, but href has it)
+    const linkElement = dialog.locator('a.qr-link')
+    await expect(linkElement).toBeVisible()
+    const linkText = await linkElement.textContent()
+    const linkHref = await linkElement.getAttribute('href')
+    // Text shows hostname without scheme
+    expect(linkText).toContain('localhost:4404/auth/')
+    // Href includes full URL with scheme
+    expect(linkHref).toContain('http://localhost:4404/auth/')
+    console.log(`✓ Device link displayed: ${linkText} (href: ${linkHref})`)
+
+    // 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 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' })
+    await closeButton.click()
+    await expect(dialog).not.toBeVisible()
+
+    console.log(`✓ Device addition dialog test complete`)
+  })
+
+  test('should extract valid reset token from dialog', async ({ page }) => {
+    test.skip(!sessionToken, 'Requires successful registration')
+
+    // Set the session cookie
+    // __Host- cookies require: secure=true, path=/, no domain (but we set domain for localhost)
+    const cookieName = getSessionCookieName()
+    await page.context().addCookies([{
+      name: cookieName,
+      value: sessionToken,
+      domain: 'localhost',
+      path: '/',
+      secure: true,
+      httpOnly: true,
+      sameSite: 'Strict',
+    }])
+
+    await page.goto('/auth/')
+    await page.waitForSelector('[data-view="profile"]', { timeout: 5000 })
+
+    // Open the dialog
+    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 .link-text')
+    const linkContent = await linkText.textContent()
+
+    // URL format: localhost/auth/word1.word2.word3.word4.word5
+    const tokenMatch = linkContent?.match(/\/auth\/([a-z]+\.[a-z]+\.[a-z]+\.[a-z]+\.[a-z]+)/)
+    expect(tokenMatch).toBeTruthy()
+    const extractedToken = tokenMatch![1]
+    console.log(`✓ Extracted reset token: ${extractedToken}`)
+
+    // Close the dialog (use the text button, not the icon button)
+    await dialog.locator('button.btn-secondary', { hasText: 'Close' }).click()
+
+    // Verify the token can be used for registration via API
+    // (We won't complete registration, just verify the WebSocket accepts it)
+    const wsUrl = `${baseUrl.replace('http', 'ws')}/auth/ws/register?reset=${encodeURIComponent(extractedToken)}&name=Test`
+
+    // Use page.evaluate to test WebSocket connection
+    const wsResult = await page.evaluate(async (wsUrl) => {
+      return new Promise<{ success: boolean; hasOptions: boolean }>((resolve) => {
+        const ws = new WebSocket(wsUrl)
+        ws.onmessage = (event) => {
+          const data = JSON.parse(event.data)
+          ws.close()
+          // Check if we got registration options (not an error)
+          resolve({
+            success: !data.status && !data.detail,
+            hasOptions: !!data.optionsJSON?.challenge
+          })
+        }
+        ws.onerror = () => resolve({ success: false, hasOptions: false })
+        setTimeout(() => {
+          ws.close()
+          resolve({ success: false, hasOptions: false })
+        }, 5000)
+      })
+    }, wsUrl)
+
+    expect(wsResult.success).toBe(true)
+    expect(wsResult.hasOptions).toBe(true)
+    console.log(`✓ Reset token is valid and accepted by server`)
+  })
+})
+
+test.describe('ProfileView - Register New', () => {
+  const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+  test('should show credentials list in profile', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    await setupSessionCookie(page, sessionToken!)
+
+    // Navigate to profile page
+    await page.goto(`${baseUrl}/auth/`)
+    await page.waitForLoadState('networkidle')
+
+    // Wait for credentials to load
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+
+    // Should have at least one credential from initial registration
+    const credentialItems = await page.locator('.credential-item').count()
+    expect(credentialItems).toBeGreaterThanOrEqual(1)
+    console.log(`✓ Profile shows ${credentialItems} credential(s) in list`)
+  })
+
+  test('should add a new passkey using Register New button', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    // Create virtual authenticator for this page
+    await createVirtualAuthenticator(page)
+    await setupSessionCookie(page, sessionToken!)
+
+    // Navigate to profile page
+    await page.goto(`${baseUrl}/auth/`)
+    await page.waitForLoadState('networkidle')
+
+    // Wait for credentials list and get initial count
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+    const initialCredentialCount = await page.locator('.credential-item').count()
+    console.log(`Initial credential count: ${initialCredentialCount}`)
+
+    // Click "Register New" button
+    const addPasskeyBtn = page.locator('button:has-text("Register New")')
+    await expect(addPasskeyBtn).toBeVisible()
+    await addPasskeyBtn.click()
+
+    // Wait for WebAuthn registration to complete (virtual authenticator handles it automatically)
+    // The button might show loading state or there might be a success message
+    await page.waitForTimeout(2000) // Give time for WebSocket registration to complete
+
+    // Refresh the page to ensure we see updated credentials
+    await page.reload()
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+
+    // Should now have one more credential
+    const newCredentialCount = await page.locator('.credential-item').count()
+    expect(newCredentialCount).toBe(initialCredentialCount + 1)
+    console.log(`✓ Successfully added new passkey. Credentials: ${initialCredentialCount} -> ${newCredentialCount}`)
+  })
+
+  test('should reject duplicate passkey from same authenticator', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    // Create virtual authenticator with resident key support
+    // Using same authenticator configuration - credentials stored on authenticator
+    await createVirtualAuthenticator(page, {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    })
+
+    await setupSessionCookie(page, sessionToken!)
+
+    // Navigate to profile page
+    await page.goto(`${baseUrl}/auth/`)
+    await page.waitForLoadState('networkidle')
+
+    // Wait for credentials list
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+    const initialCredentialCount = await page.locator('.credential-item').count()
+
+    // Try to add a passkey - with excludeCredentials the authenticator should
+    // prevent re-registration of the same credential
+    const addPasskeyBtn = page.locator('button:has-text("Register New")')
+    await expect(addPasskeyBtn).toBeVisible()
+    await addPasskeyBtn.click()
+
+    // Wait for response - could be success (new credential) or error (duplicate)
+    await page.waitForTimeout(3000)
+
+    // Check for error message or status message
+    const statusMessage = page.locator('.status-message')
+    const hasError = await statusMessage.locator('.error, .status-error').isVisible().catch(() => false)
+
+    // Reload to check final credential count
+    await page.reload()
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+    const finalCredentialCount = await page.locator('.credential-item').count()
+
+    // The test passes if either:
+    // 1. An error was shown (duplicate rejected by excludeCredentials)
+    // 2. A new credential was added (fresh authenticator has no stored credential)
+    console.log(`Credentials: ${initialCredentialCount} -> ${finalCredentialCount}, error shown: ${hasError}`)
+    console.log(`✓ Add passkey flow completed (new authenticator creates new credential)`)
+  })
+})
+
+test.describe('ProfileView - Multi-Authenticator', () => {
+  const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+  test('should add passkey from different authenticator', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    // Create a different virtual authenticator (simulating a different device)
+    await createVirtualAuthenticator(page, {
+      protocol: 'ctap2',
+      transport: 'usb', // Different transport - like a USB security key
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    })
+
+    await setupSessionCookie(page, sessionToken!)
+
+    // Navigate to profile page
+    await page.goto(`${baseUrl}/auth/`)
+    await page.waitForLoadState('networkidle')
+
+    // Wait for credentials list and get initial count
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+    const initialCredentialCount = await page.locator('.credential-item').count()
+
+    // Click "Register New" button
+    const addPasskeyBtn = page.locator('button:has-text("Register New")')
+    await expect(addPasskeyBtn).toBeVisible()
+    await addPasskeyBtn.click()
+
+    // Wait for registration to complete
+    await page.waitForTimeout(2000)
+
+    // Refresh to see updated list
+    await page.reload()
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+
+    const newCredentialCount = await page.locator('.credential-item').count()
+    expect(newCredentialCount).toBe(initialCredentialCount + 1)
+    console.log(`✓ Added passkey from USB authenticator. Credentials: ${initialCredentialCount} -> ${newCredentialCount}`)
+  })
+
+  test('should display multiple credentials with details', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    await setupSessionCookie(page, sessionToken!)
+
+    // Navigate to profile page
+    await page.goto(`${baseUrl}/auth/`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+
+    // Should have multiple credentials now from previous tests
+    const credentialItems = page.locator('.credential-item')
+    const count = await credentialItems.count()
+
+    // Verify each credential has required elements
+    for (let i = 0; i < count; i++) {
+      const item = credentialItems.nth(i)
+
+      // Should have title/name
+      const title = item.locator('.item-title')
+      await expect(title).toBeVisible()
+
+      // Should have date information
+      const dates = item.locator('.credential-dates')
+      await expect(dates).toBeVisible()
+
+      // Should have created date
+      const createdDate = item.locator('.date-label:has-text("Created:")')
+      await expect(createdDate).toBeVisible()
+    }
+
+    console.log(`✓ All ${count} credentials displayed with proper details`)
+
+    // Take screenshot of credentials list
+    await page.screenshot({
+      path: 'test-results/credentials-list.png',
+      fullPage: false,
+    })
+    console.log(`✓ Screenshot saved: test-results/credentials-list.png`)
+  })
+
+  test('should show current session badge', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    await setupSessionCookie(page, sessionToken!)
+
+    // Navigate to profile page
+    await page.goto(`${baseUrl}/auth/`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+
+    // Look for the "Current" badge indicating current session's credential
+    const currentBadge = page.locator('.badge-current:has-text("Current")')
+    const hasCurrent = await currentBadge.isVisible().catch(() => false)
+
+    if (hasCurrent) {
+      console.log(`✓ Current session credential is marked with "Current" badge`)
+
+      // The current credential should have delete disabled
+      const currentItem = page.locator('.credential-item.current-session')
+      if (await currentItem.isVisible()) {
+        const deleteBtn = currentItem.locator('.btn-card-delete')
+        if (await deleteBtn.isVisible()) {
+          await expect(deleteBtn).toBeDisabled()
+          console.log(`✓ Delete button is disabled for current session credential`)
+        }
+      }
+    } else {
+      console.log(`ℹ No credential marked as current (may be using different auth method)`)
+    }
+  })
+})

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

@@ -0,0 +1,622 @@
+import { test, expect, createVirtualAuthenticator } from './fixtures/virtual-authenticator'
+import {
+  getSessionCookieName,
+  getSavedSessionToken,
+  saveSessionToken,
+  registerPasskey,
+  authenticatePasskey,
+  popDeviceToken,
+  getDeviceTokenCount,
+  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.
+ *
+ * These tests simulate the flow used by SPAs when making API calls:
+ * 1. API call returns 401/403 with auth.iframe URL
+ * 2. App shows auth iframe overlay
+ * 3. User authenticates in iframe
+ * 4. Iframe posts 'auth-success' message to parent
+ * 5. App retries original API call
+ *
+ * Note: These tests depend on 10-passkey.spec.ts running first to create device tokens.
+ * Each test that needs authentication uses popDeviceToken() to get a fresh token
+ * and registers its own credential in its virtual authenticator.
+ */
+
+const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+/**
+ * Helper to set up session cookie for a page.
+ */
+async function setupSessionCookie(page: Page, sessionToken: string): Promise<void> {
+  const cookieName = getSessionCookieName()
+  await page.context().addCookies([{
+    name: cookieName,
+    value: sessionToken,
+    domain: 'localhost',
+    path: '/',
+    secure: true,
+    httpOnly: true,
+    sameSite: 'Strict' as const,
+  }])
+}
+
+/**
+ * Helper to clear session cookie.
+ */
+async function clearSessionCookie(page: Page): Promise<void> {
+  const cookieName = getSessionCookieName()
+  await page.context().clearCookies({ name: cookieName })
+}
+
+/**
+ * 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/`)
+}
+
+/**
+ * Make an API call through the examples page, returning a Promise.
+ * Wraps the page's apiCall and listens for auth-success/auth-back messages.
+ * Returns { status, data } on success, or throws on cancellation.
+ *
+ * Note: If auth is not needed (request succeeds without 401/403), this will
+ * resolve after a timeout with the direct fetch result.
+ */
+async function makeApiCall(page: Page, url: string, method = 'GET'): Promise<{ status: number; data?: any }> {
+  return page.evaluate(({ url, method }) => {
+    return new Promise((resolve, reject) => {
+      let resolved = false;
+
+      // Listen for auth messages
+      const handler = (event: MessageEvent) => {
+        const { type } = event.data || {};
+        if (type === 'auth-success') {
+          if (resolved) return;
+          resolved = true;
+          window.removeEventListener('message', handler);
+          // Wait a tick for the page's handler to retry, then make our own call
+          setTimeout(async () => {
+            try {
+              const response = await fetch(url, { method });
+              if (response.status === 204) {
+                resolve({ status: 204 });
+              } else if (response.ok) {
+                const data = await response.json();
+                resolve({ status: response.status, data });
+              } else {
+                resolve({ status: response.status });
+              }
+            } catch (e) {
+              resolve({ status: 0 });
+            }
+          }, 200);
+        } else if (type === 'auth-back') {
+          if (resolved) return;
+          resolved = true;
+          window.removeEventListener('message', handler);
+          reject(new Error('cancelled'));
+        }
+      };
+      window.addEventListener('message', handler);
+
+      // Also make a direct fetch to handle the case where no auth is needed
+      // (the page's apiCall won't send any message if the request succeeds)
+      setTimeout(async () => {
+        if (resolved) return;
+        try {
+          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;
+            resolved = true;
+            window.removeEventListener('message', handler);
+            if (response.status === 204) {
+              resolve({ status: 204 });
+            } else if (response.ok) {
+              const data = await response.json();
+              resolve({ status: response.status, data });
+            } else {
+              resolve({ status: response.status });
+            }
+          }
+          // If 401/403, the auth iframe will appear and we wait for the message
+        } catch (e) {
+          // Network error - let the message handler deal with it
+        }
+      }, 100);
+
+      // Call the page's existing apiCall function
+      // It will show the iframe on 401/403
+      (window as any).apiCall(url, method);
+    });
+  }, { url, method });
+}
+
+/**
+ * Wait for auth iframe to appear and return a reference to it.
+ */
+async function waitForAuthIframe(page: Page, timeout = 5000): Promise<Frame> {
+  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\// })!
+}
+
+/**
+ * Wait for auth iframe to disappear.
+ */
+async function waitForAuthIframeHidden(page: Page, timeout = 5000): Promise<void> {
+  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('#paskia-iframe')
+  await iframe.getByRole('button', { name: 'Back' }).click()
+}
+
+/**
+ * Click Login button in auth iframe.
+ */
+async function clickLoginInIframe(page: Page): Promise<void> {
+  const iframe = page.frameLocator('#paskia-iframe')
+  await iframe.getByRole('button', { name: 'Login' }).click()
+}
+
+/**
+ * Click Verify button in auth iframe (for reauth mode).
+ */
+async function clickVerifyInIframe(page: Page): Promise<void> {
+  const iframe = page.frameLocator('#paskia-iframe')
+  await iframe.getByRole('button', { name: 'Verify' }).click()
+}
+
+/**
+ * Click Logout button in auth iframe (for forbidden mode).
+ */
+async function clickLogoutInIframe(page: Page): Promise<void> {
+  const iframe = page.frameLocator('#paskia-iframe')
+  await iframe.getByRole('button', { name: 'Logout' }).click()
+}
+
+test.describe('API Mode - 401 Login Flow', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  test('should show auth iframe on 401 and allow cancellation (Back)', async ({ page }) => {
+    // Set up test harness (injects our API flow handler)
+    await setupTestHarness(page)
+
+    // Clear any existing session cookie
+    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', 'GET').catch(e => e)
+    console.log('✓ Auth iframe appeared on 401')
+
+    // Verify it's in login mode (not reauth)
+    const iframe = page.frameLocator('#paskia-iframe')
+    await expect(iframe.locator('h1')).toContainText('🔐')
+    await expect(iframe.getByRole('button', { name: 'Login' })).toBeVisible()
+
+    // Take screenshot of the login iframe
+    await page.screenshot({ path: 'test-results/api-401-login-iframe.png' })
+    console.log('✓ Screenshot saved: test-results/api-401-login-iframe.png')
+
+    // Click Back to cancel authentication
+    await clickBackInIframe(page)
+
+    // Iframe should close
+    await waitForAuthIframeHidden(page)
+    console.log('✓ Auth iframe closed on Back button')
+
+    // Wait for the API call promise to reject
+    const result = await apiCallPromise
+    expect(result).toBeInstanceOf(Error)
+    expect(result.message).toContain('cancelled')
+
+    // Output should show cancellation
+    const output = page.locator('#output')
+    await expect(output).toContainText('cancelled')
+    console.log('✓ API call was cancelled')
+  })
+
+  test('should show auth iframe on 401 and complete login', async ({ page, virtualAuthenticator }) => {
+    // Get a device token from the pool (created by 10-passkey.spec.ts)
+    const deviceToken = popDeviceToken()
+    test.skip(!deviceToken, 'Requires device token from passkey tests')
+    console.log(`✓ Got device token: ${deviceToken} (${getDeviceTokenCount()} remaining)`)
+
+    // Navigate and register credential using device token
+    await page.goto(`${baseUrl}/auth/`)
+    const regResult = await registerPasskey(page, baseUrl, {
+      resetToken: deviceToken,
+      displayName: 'API Test Device',
+    })
+    console.log(`✓ Registered credential: ${regResult.credential}`)
+
+    // Logout to clear session (but keep the passkey in virtual authenticator)
+    await logout(page, baseUrl, regResult.session_token)
+    console.log('✓ Logged out')
+
+    // Set up test harness
+    await setupTestHarness(page)
+
+    // Make API call that triggers 401
+    const apiCallPromise = makeApiCall(page, '/auth/api/user-info', 'GET')
+
+    // Wait for auth iframe to appear
+    await waitForAuthIframe(page)
+    console.log('✓ Auth iframe appeared on 401')
+
+    // Click Login button - virtual authenticator will handle the passkey
+    await clickLoginInIframe(page)
+
+    // Wait for authentication to complete - iframe should close
+    await waitForAuthIframeHidden(page, 10000)
+    console.log('✓ Authentication completed, iframe closed')
+
+    // Wait for API call to complete and verify result
+    const result = await apiCallPromise
+    expect(result.status).toBe(200)
+    expect(result.data.user).toBeDefined()
+    console.log('✓ API call succeeded after authentication')
+
+    // Save the session for other tests
+    const cookies = await page.context().cookies()
+    const sessionCookie = cookies.find(c => c.name === getSessionCookieName())
+    if (sessionCookie) {
+      saveSessionToken(sessionCookie.value)
+      console.log(`✓ Saved session token for other tests`)
+    }
+  })
+})
+
+test.describe('API Mode - 401 Reauth Flow', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  test('should show reauth iframe on max_age violation and allow cancellation', async ({ page, virtualAuthenticator }) => {
+    // Get a device token from the pool (created by 10-passkey.spec.ts)
+    const deviceToken = popDeviceToken()
+    test.skip(!deviceToken, 'Requires device token from passkey tests')
+    console.log(`✓ Got device token: ${deviceToken} (${getDeviceTokenCount()} remaining)`)
+
+    // Navigate and register a credential
+    await page.goto(`${baseUrl}/auth/`)
+    const regResult = await registerPasskey(page, baseUrl, {
+      resetToken: deviceToken,
+      displayName: 'Reauth Cancel Test Device',
+    })
+    saveSessionToken(regResult.session_token)
+
+    // Wait for session to age past max_age threshold
+    console.log('Waiting 3s for session to age...')
+    await page.waitForTimeout(3000)
+
+    // Set up test harness with the session
+    await setupSessionCookie(page, regResult.session_token)
+    await setupTestHarness(page)
+
+    // Make API call with max_age=1s (session is now > 1s old)
+    const apiCallPromise = makeApiCall(page, '/auth/api/forward?max_age=1s', 'GET').catch(e => e)
+
+    // Wait for auth iframe to appear
+    await waitForAuthIframe(page)
+    console.log('✓ Reauth iframe appeared (session older than max_age)')
+
+    // Verify it's in reauth mode
+    const iframe = page.frameLocator('#paskia-iframe')
+    await expect(iframe.locator('h1')).toContainText('Additional Authentication')
+    await expect(iframe.getByRole('button', { name: 'Verify' })).toBeVisible()
+
+    // Take screenshot of reauth iframe
+    await page.screenshot({ path: 'test-results/api-401-reauth-iframe.png' })
+    console.log('✓ Screenshot saved: test-results/api-401-reauth-iframe.png')
+
+    // Click Back to cancel
+    await clickBackInIframe(page)
+    await waitForAuthIframeHidden(page)
+    console.log('✓ Reauth cancelled via Back button')
+
+    const result = await apiCallPromise
+    expect(result).toBeInstanceOf(Error)
+  })
+
+  test('should complete reauth flow with passkey', async ({ page, virtualAuthenticator }) => {
+    // Get a device token from the pool (created by 10-passkey.spec.ts)
+    const deviceToken = popDeviceToken()
+    test.skip(!deviceToken, 'Requires device token from passkey tests')
+    console.log(`✓ Got device token: ${deviceToken} (${getDeviceTokenCount()} remaining)`)
+
+    // Navigate and register a credential
+    await page.goto(`${baseUrl}/auth/`)
+    const regResult = await registerPasskey(page, baseUrl, {
+      resetToken: deviceToken,
+      displayName: 'Reauth Test Device',
+    })
+
+    // Save the new session
+    saveSessionToken(regResult.session_token)
+
+    // Wait for the session to be "old" (>2s for max_age=2s test)
+    console.log('Waiting 3s for session to age...')
+    await page.waitForTimeout(3000)
+
+    // Set up test harness with the session
+    await setupSessionCookie(page, regResult.session_token)
+    await setupTestHarness(page)
+
+    // Make API call with max_age=2s
+    const apiCallPromise = makeApiCall(page, '/auth/api/forward?max_age=2s', 'GET')
+
+    // Auth iframe should appear in reauth mode
+    await waitForAuthIframe(page)
+    console.log('✓ Reauth iframe appeared')
+
+    const iframe = page.frameLocator('#paskia-iframe')
+    await expect(iframe.locator('h1')).toContainText('Additional Authentication')
+
+    // Click Verify - virtual authenticator handles passkey
+    await clickVerifyInIframe(page)
+
+    // Wait for completion
+    await waitForAuthIframeHidden(page, 10000)
+    console.log('✓ Reauth completed')
+
+    // Wait for API call result
+    const result = await apiCallPromise
+    expect(result.status).toBe(204)
+    console.log('✓ Forward endpoint returned 204 after reauth')
+  })
+})
+
+test.describe('API Mode - 403 Forbidden Flow', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  test('should show forbidden view and allow going back', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    // Set up test harness with valid session
+    await setupSessionCookie(page, sessionToken!)
+    await setupTestHarness(page)
+
+    // Make API call requiring admin permission
+    const apiCallPromise = makeApiCall(page, '/auth/api/forward?perm=auth:admin', 'GET').catch(e => e)
+
+    // Check if auth iframe appeared
+    const iframeAppeared = await page.waitForSelector('#paskia-iframe', { timeout: 3000 }).then(() => true).catch(() => false)
+
+    if (!iframeAppeared) {
+      // User might already have admin permission
+      const result = await apiCallPromise
+      if (result.status === 204) {
+        console.log('✓ User has admin permission, got 204 (skipping forbidden test)')
+        return
+      }
+    }
+
+    await waitForAuthIframe(page)
+    console.log('✓ Auth iframe appeared on permission check')
+
+    // Wait for view to stabilize and check mode
+    await page.waitForTimeout(500)
+    const iframe = page.frameLocator('#paskia-iframe')
+    const headingText = await iframe.locator('h1').textContent()
+    console.log(`  Heading: ${headingText}`)
+
+    if (headingText?.includes('Forbidden')) {
+      console.log('✓ Forbidden view displayed (user lacks admin permission)')
+
+      // Should show Logout button in forbidden mode
+      await expect(iframe.getByRole('button', { name: 'Logout' })).toBeVisible()
+
+      // Take screenshot of forbidden view
+      await page.screenshot({ path: 'test-results/api-403-forbidden-iframe.png' })
+      console.log('✓ Screenshot saved: test-results/api-403-forbidden-iframe.png')
+
+      // Click Back to close
+      await clickBackInIframe(page)
+      await waitForAuthIframeHidden(page)
+      console.log('✓ Forbidden dialog closed via Back')
+
+      const result = await apiCallPromise
+      expect(result).toBeInstanceOf(Error)
+    } else {
+      // User has admin permission, so they got through
+      console.log('✓ User has admin permission, no forbidden view')
+    }
+  })
+
+  test('should allow logout from forbidden view and then login', async ({ page, virtualAuthenticator }) => {
+    // Get a device token from the pool (created by 10-passkey.spec.ts)
+    const deviceToken = popDeviceToken()
+    test.skip(!deviceToken, 'Requires device token from passkey tests')
+    console.log(`✓ Got device token: ${deviceToken} (${getDeviceTokenCount()} remaining)`)
+
+    // Navigate and register credential for later login
+    await page.goto(`${baseUrl}/auth/`)
+    const regResult = await registerPasskey(page, baseUrl, {
+      resetToken: deviceToken,
+      displayName: 'Forbidden Test Device',
+    })
+    saveSessionToken(regResult.session_token)
+
+    // Set up test harness with the session
+    await setupSessionCookie(page, regResult.session_token)
+    await setupTestHarness(page)
+
+    // Make API call requiring admin permission
+    const apiCallPromise = makeApiCall(page, '/auth/api/forward?perm=auth:admin', 'GET').catch(e => e)
+
+    // Check if auth iframe appeared
+    const iframeAppeared = await page.waitForSelector('#paskia-iframe', { timeout: 3000 }).then(() => true).catch(() => false)
+
+    if (!iframeAppeared) {
+      const result = await apiCallPromise
+      if (result.status === 204) {
+        console.log('✓ User has admin permission, skipping forbidden->login test')
+        return
+      }
+    }
+
+    await waitForAuthIframe(page)
+    const iframe = page.frameLocator('#paskia-iframe')
+    await page.waitForTimeout(500)
+
+    const headingText = await iframe.locator('h1').textContent()
+
+    if (headingText?.includes('Forbidden')) {
+      console.log('✓ Forbidden view displayed')
+
+      // Take screenshot of forbidden view before logout
+      await page.screenshot({ path: 'test-results/api-403-forbidden-before-logout.png' })
+      console.log('✓ Screenshot saved: test-results/api-403-forbidden-before-logout.png')
+
+      // Click Logout in the iframe
+      await clickLogoutInIframe(page)
+
+      // After logout, the view should switch to login mode and show a toast
+      await page.waitForTimeout(1000)
+      await expect(iframe.getByRole('button', { name: 'Login' })).toBeVisible({ timeout: 5000 })
+      console.log('✓ Switched to login view after logout')
+
+      // Verify status message appears indicating user can login with another account
+      const statusMessage = iframe.locator('.global-status .status')
+      await expect(statusMessage).toBeVisible({ timeout: 3000 })
+      const statusText = await statusMessage.textContent()
+      expect(statusText).toContain('sign in with a different account')
+      console.log(`✓ Status message: ${statusText}`)
+
+      // Take screenshot showing login view with status message (after forbidden logout)
+      await page.screenshot({ path: 'test-results/api-403-after-logout-login.png' })
+      console.log('✓ Screenshot saved: test-results/api-403-after-logout-login.png')
+
+      // Now login with the passkey
+      await clickLoginInIframe(page)
+
+      // Wait for auth to complete
+      await waitForAuthIframeHidden(page, 10000)
+      console.log('✓ Logged in successfully')
+
+      // The API call should have completed (but may still fail with 403 since same user)
+      const result = await apiCallPromise
+      console.log(`  Final result status: ${result.status || 'error'}`)
+    } else {
+      console.log('✓ Not in forbidden mode, closing dialog')
+      await clickBackInIframe(page)
+      await waitForAuthIframeHidden(page)
+    }
+  })
+})
+
+test.describe('API Mode - Direct API Response Format', () => {
+  test('should return JSON with auth.iframe on 401 (unauthenticated)', async ({ page }) => {
+    // Make direct API call without session
+    const response = await page.request.get(`${baseUrl}/auth/api/forward`, {
+      headers: {
+        'Accept': 'application/json',
+      },
+    })
+
+    expect(response.status()).toBe(401)
+
+    const data = await response.json()
+    expect(data.auth).toBeDefined()
+    expect(data.auth.iframe).toBeDefined()
+    expect(data.auth.mode).toBe('login')
+    expect(data.auth.iframe).toContain('/auth/restricted/iframe')
+
+    console.log(`✓ 401 response includes auth.iframe: ${data.auth.iframe}`)
+  })
+
+  test('should return JSON with auth.mode=forbidden on 403', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    const cookieName = getSessionCookieName()
+
+    // Make API call with session but requesting admin permission
+    const response = await page.request.get(`${baseUrl}/auth/api/forward?perm=auth:admin`, {
+      headers: {
+        'Accept': 'application/json',
+        'Cookie': `${cookieName}=${sessionToken}`,
+      },
+    })
+
+    // Could be 403 (forbidden) or 204 (user is admin)
+    if (response.status() === 403) {
+      const data = await response.json()
+      expect(data.auth).toBeDefined()
+      expect(data.auth.mode).toBe('forbidden')
+      console.log(`✓ 403 response auth.mode: ${data.auth.mode}`)
+    } else if (response.status() === 204) {
+      console.log('✓ User has admin permission, got 204')
+    } else {
+      console.log(`  Unexpected status: ${response.status()}`)
+    }
+  })
+
+  test('should return JSON with auth.mode=reauth on max_age violation', async ({ page, virtualAuthenticator }) => {
+    // Get a device token from the pool (created by 10-passkey.spec.ts)
+    const deviceToken = popDeviceToken()
+    test.skip(!deviceToken, 'Requires device token from passkey tests')
+    console.log(`✓ Got device token: ${deviceToken} (${getDeviceTokenCount()} remaining)`)
+
+    // Navigate and create fresh session
+    await page.goto(`${baseUrl}/auth/`)
+    const regResult = await registerPasskey(page, baseUrl, {
+      resetToken: deviceToken,
+      displayName: 'Max Age Test Device',
+    })
+
+    // Wait for session to be older than 1s
+    await page.waitForTimeout(2000)
+
+    const cookieName = getSessionCookieName()
+
+    // Make API call with max_age=1s (session is now > 1s old)
+    const response = await page.request.get(`${baseUrl}/auth/api/forward?max_age=1s`, {
+      headers: {
+        'Accept': 'application/json',
+        'Cookie': `${cookieName}=${regResult.session_token}`,
+      },
+    })
+
+    expect(response.status()).toBe(401)
+
+    const data = await response.json()
+    expect(data.auth).toBeDefined()
+    expect(data.auth.mode).toBe('reauth')
+
+    console.log(`✓ 401 response auth.mode: ${data.auth.mode}`)
+
+    // Save session for cleanup
+    saveSessionToken(regResult.session_token)
+  })
+})

e2e/tests/99-logout.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from './fixtures/virtual-authenticator'
+import {
+  logout,
+  getSessionCookieName,
+  getSavedSessionToken,
+} from './fixtures/passkey-helpers'
+
+/**
+ * Logout test - runs last to clean up the session.
+ * The "99-" prefix ensures this runs after all other tests.
+ */
+test.describe('Logout', () => {
+  const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+  test('should logout successfully', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    await logout(page, baseUrl, sessionToken!)
+
+    // Session should no longer be valid
+    const cookieName = getSessionCookieName()
+    const response = await page.request.post(`${baseUrl}/auth/api/validate`, {
+      headers: {
+        'Cookie': `${cookieName}=${sessionToken}`,
+      },
+      failOnStatusCode: false,
+    })
+
+    expect(response.status()).toBe(401)
+    console.log(`✓ Logout successful, session invalidated`)
+  })
+})

e2e/tests/fixtures/coverage.ts

@@ -0,0 +1,147 @@
+import { test as base, type Page, type CDPSession } from '@playwright/test'
+import { existsSync, mkdirSync, writeFileSync, readFileSync } from 'fs'
+import { join, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const coverageDir = join(__dirname, '..', '..', 'coverage-frontend')
+
+// Check if frontend coverage is enabled
+const COLLECT_COVERAGE = process.env.COVERAGE === '1' || process.env.COVERAGE === 'true'
+
+interface CoverageEntry {
+  url: string
+  scriptId: string
+  source?: string
+  functions: Array<{
+    functionName: string
+    ranges: Array<{
+      startOffset: number
+      endOffset: number
+      count: number
+    }>
+    isBlockCoverage: boolean
+  }>
+}
+
+/**
+ * Collect V8 JavaScript coverage from the page.
+ */
+async function startCoverage(page: Page): Promise<CDPSession | null> {
+  if (!COLLECT_COVERAGE) return null
+
+  try {
+    const cdp = await page.context().newCDPSession(page)
+    await cdp.send('Profiler.enable')
+    await cdp.send('Profiler.startPreciseCoverage', {
+      callCount: true,
+      detailed: true,
+    })
+    return cdp
+  } catch {
+    return null
+  }
+}
+
+async function stopCoverage(cdp: CDPSession | null, testName: string): Promise<void> {
+  if (!cdp) return
+
+  try {
+    const { result } = await cdp.send('Profiler.takePreciseCoverage')
+    await cdp.send('Profiler.stopPreciseCoverage')
+    await cdp.send('Profiler.disable')
+
+    // Filter to only include our app's JavaScript files
+    const appCoverage = result.filter((entry: CoverageEntry) =>
+      entry.url.includes('/auth/') &&
+      entry.url.endsWith('.js') &&
+      !entry.url.includes('node_modules')
+    )
+
+    if (appCoverage.length > 0) {
+      // Ensure coverage directory exists
+      if (!existsSync(coverageDir)) {
+        mkdirSync(coverageDir, { recursive: true })
+      }
+
+      // Save coverage data for this test
+      const safeName = testName.replace(/[^a-z0-9]/gi, '_').substring(0, 50)
+      const coverageFile = join(coverageDir, `coverage-${safeName}-${Date.now()}.json`)
+      writeFileSync(coverageFile, JSON.stringify(appCoverage, null, 2))
+    }
+  } catch (err) {
+    // Silently ignore coverage collection errors
+  }
+}
+
+/**
+ * Merge all coverage files into a single summary.
+ */
+export async function mergeCoverage(): Promise<void> {
+  if (!COLLECT_COVERAGE || !existsSync(coverageDir)) return
+
+  const files = require('fs').readdirSync(coverageDir).filter((f: string) => f.startsWith('coverage-') && f.endsWith('.json'))
+  if (files.length === 0) return
+
+  const merged: Map<string, CoverageEntry> = new Map()
+
+  for (const file of files) {
+    const data: CoverageEntry[] = JSON.parse(readFileSync(join(coverageDir, file), 'utf-8'))
+    for (const entry of data) {
+      const existing = merged.get(entry.url)
+      if (!existing) {
+        merged.set(entry.url, entry)
+      } else {
+        // Merge function coverage counts
+        for (const func of entry.functions) {
+          const existingFunc = existing.functions.find(f => f.functionName === func.functionName)
+          if (existingFunc) {
+            for (let i = 0; i < func.ranges.length; i++) {
+              if (existingFunc.ranges[i]) {
+                existingFunc.ranges[i].count += func.ranges[i].count
+              }
+            }
+          } else {
+            existing.functions.push(func)
+          }
+        }
+      }
+    }
+  }
+
+  // Write merged coverage
+  writeFileSync(
+    join(coverageDir, 'coverage-merged.json'),
+    JSON.stringify(Array.from(merged.values()), null, 2)
+  )
+
+  // Generate simple coverage summary
+  let totalFunctions = 0
+  let coveredFunctions = 0
+
+  for (const entry of merged.values()) {
+    for (const func of entry.functions) {
+      totalFunctions++
+      const hasCoverage = func.ranges.some(r => r.count > 0)
+      if (hasCoverage) coveredFunctions++
+    }
+  }
+
+  const percentage = totalFunctions > 0 ? Math.round((coveredFunctions / totalFunctions) * 100) : 0
+  console.log(`\n  📊 Frontend JS Coverage: ${coveredFunctions}/${totalFunctions} functions (${percentage}%)`)
+  console.log(`  ✅ Frontend coverage data: ${coverageDir}/coverage-merged.json\n`)
+}
+
+/**
+ * Extended test with coverage collection.
+ * This wraps each test to collect V8 coverage data.
+ */
+export const testWithCoverage = base.extend<{
+  coverageSession: CDPSession | null
+}>({
+  coverageSession: async ({ page }, use, testInfo) => {
+    const cdp = await startCoverage(page)
+    await use(cdp)
+    await stopCoverage(cdp, testInfo.title)
+  },
+})

e2e/tests/fixtures/passkey-helpers.ts

@@ -0,0 +1,537 @@
+import { type Page } from '@playwright/test'
+import { existsSync, readFileSync, writeFileSync } from 'fs'
+import { join, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const stateFile = join(__dirname, '..', '..', 'test-data', 'test-state.json')
+
+/**
+ * WebSocket helpers for passkey registration and authentication.
+ * These functions mirror the frontend's passkey.js but work in a Playwright context.
+ */
+
+export interface RegistrationResult {
+  user: string
+  credential: string
+  session_token: string
+  message: string
+}
+
+export interface AuthenticationResult {
+  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.
+ */
+export function getBootstrapResetToken(): string | undefined {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      return state.resetToken
+    } catch {
+      return undefined
+    }
+  }
+  return undefined
+}
+
+/**
+ * Get the session cookie name from the test state file.
+ */
+export function getSessionCookieName(): string {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      return state.sessionCookie || '__Host-auth'
+    } catch {
+      return '__Host-auth'
+    }
+  }
+  return '__Host-auth'
+}
+
+/**
+ * Save a session token to the test state file for sharing across test groups.
+ */
+export function saveSessionToken(sessionToken: string): void {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      state.savedSessionToken = sessionToken
+      writeFileSync(stateFile, JSON.stringify(state, null, 2))
+    } catch {
+      // Ignore errors
+    }
+  }
+}
+
+/**
+ * Clear the saved session token from the test state file.
+ * Call this after logout to prevent accidental reuse of invalidated sessions.
+ */
+export function clearSavedSessionToken(): void {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      delete state.savedSessionToken
+      writeFileSync(stateFile, JSON.stringify(state, null, 2))
+    } catch {
+      // Ignore errors
+    }
+  }
+}
+
+/**
+ * Get a saved session token from the test state file.
+ */
+export function getSavedSessionToken(): string | undefined {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      return state.savedSessionToken
+    } catch {
+      return undefined
+    }
+  }
+  return undefined
+}
+
+/**
+ * Save device tokens to the test state file for use by other tests.
+ * These tokens allow tests to register their own passkeys.
+ */
+export function saveDeviceTokens(tokens: string[]): void {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      state.deviceTokens = tokens
+      writeFileSync(stateFile, JSON.stringify(state, null, 2))
+    } catch {
+      // Ignore errors
+    }
+  }
+}
+
+/**
+ * Get and consume a device token from the pool.
+ * Returns undefined if no tokens are available.
+ */
+export function popDeviceToken(): string | undefined {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      if (state.deviceTokens && state.deviceTokens.length > 0) {
+        const token = state.deviceTokens.pop()
+        writeFileSync(stateFile, JSON.stringify(state, null, 2))
+        return token
+      }
+    } catch {
+      return undefined
+    }
+  }
+  return undefined
+}
+
+/**
+ * Get the count of remaining device tokens.
+ */
+export function getDeviceTokenCount(): number {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      return state.deviceTokens?.length || 0
+    } catch {
+      return 0
+    }
+  }
+  return 0
+}
+
+/**
+ * Perform passkey registration via WebSocket.
+ * This runs in the browser context using the virtual authenticator.
+ */
+export async function registerPasskey(
+  page: Page,
+  baseUrl: string,
+  options: { resetToken?: string; displayName?: string } = {}
+): Promise<RegistrationResult> {
+  // 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[] = []
+    if (resetToken) params.push(`reset=${encodeURIComponent(resetToken)}`)
+    if (displayName) params.push(`name=${encodeURIComponent(displayName)}`)
+    if (params.length) wsUrl += `?${params.join('&')}`
+
+    return new Promise<any>((resolve, reject) => {
+      const ws = new WebSocket(wsUrl)
+      let done = false
+
+      ws.onopen = () => {
+        console.log('WebSocket connected for registration')
+      }
+
+      ws.onmessage = async (event) => {
+        const data = JSON.parse(event.data)
+
+        // 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 (exchange_code flow)
+        if (data.exchange_code) {
+          done = true
+          ws.close()
+          // 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
+        }
+
+        // This should be the registration options from server (wrapped in optionsJSON)
+        // Use the native WebAuthn API with the virtual authenticator
+        try {
+          // Extract options from the optionsJSON wrapper
+          const opts = data.optionsJSON
+
+          // Convert base64url challenge to ArrayBuffer
+          const challenge = Uint8Array.from(atob(opts.challenge.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0))
+
+          // Build the credential creation options
+          const publicKeyCredentialCreationOptions: CredentialCreationOptions = {
+            publicKey: {
+              challenge: challenge,
+              rp: {
+                name: opts.rp.name,
+                id: opts.rp.id,
+              },
+              user: {
+                id: Uint8Array.from(atob(opts.user.id.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0)),
+                name: opts.user.name,
+                displayName: opts.user.displayName,
+              },
+              pubKeyCredParams: opts.pubKeyCredParams,
+              authenticatorSelection: opts.authenticatorSelection,
+              timeout: opts.timeout,
+              attestation: opts.attestation,
+              excludeCredentials: opts.excludeCredentials?.map((cred: any) => ({
+                ...cred,
+                id: Uint8Array.from(atob(cred.id.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0)),
+              })) || [],
+            }
+          }
+
+          // Create the credential using native WebAuthn API (virtual authenticator handles it)
+          const credential = await navigator.credentials.create(publicKeyCredentialCreationOptions) as PublicKeyCredential
+
+          if (!credential) {
+            throw new Error('Failed to create credential')
+          }
+
+          const response = credential.response as AuthenticatorAttestationResponse
+
+          // Convert response to JSON format expected by server
+          const registrationResponse = {
+            id: credential.id,
+            rawId: btoa(String.fromCharCode(...new Uint8Array(credential.rawId))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
+            response: {
+              clientDataJSON: btoa(String.fromCharCode(...new Uint8Array(response.clientDataJSON))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
+              attestationObject: btoa(String.fromCharCode(...new Uint8Array(response.attestationObject))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
+              transports: response.getTransports?.() || [],
+            },
+            type: credential.type,
+            clientExtensionResults: credential.getClientExtensionResults(),
+            authenticatorAttachment: (credential as any).authenticatorAttachment,
+          }
+
+          ws.send(JSON.stringify(registrationResponse))
+        } catch (error: any) {
+          ws.close()
+          reject(new Error(error.message || 'Registration failed'))
+        }
+      }
+
+      ws.onerror = () => {
+        reject(new Error('WebSocket error during registration'))
+      }
+
+      ws.onclose = (event) => {
+        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 || '',
+  }
+}
+
+/**
+ * Perform passkey authentication via WebSocket.
+ * This runs in the browser context using the virtual authenticator.
+ */
+export async function authenticatePasskey(
+  page: Page,
+  baseUrl: string
+): Promise<AuthenticationResult> {
+  // 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')
+      }
+
+      ws.onmessage = async (event) => {
+        const data = JSON.parse(event.data)
+
+        // 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 (exchange_code flow)
+        if (data.exchange_code) {
+          done = true
+          ws.close()
+          // 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
+        }
+
+        // This should be the authentication options from server (wrapped in optionsJSON)
+        try {
+          // Extract options from the optionsJSON wrapper
+          const opts = data.optionsJSON
+
+          // Convert base64url challenge to ArrayBuffer
+          const challenge = Uint8Array.from(atob(opts.challenge.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0))
+
+          // Build the credential request options
+          const publicKeyCredentialRequestOptions: CredentialRequestOptions = {
+            publicKey: {
+              challenge: challenge,
+              rpId: opts.rpId,
+              timeout: opts.timeout,
+              userVerification: opts.userVerification,
+              allowCredentials: opts.allowCredentials?.map((cred: any) => ({
+                type: cred.type,
+                id: Uint8Array.from(atob(cred.id.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0)),
+                transports: cred.transports,
+              })) || [],
+            }
+          }
+
+          // Get the credential using native WebAuthn API (virtual authenticator handles it)
+          const credential = await navigator.credentials.get(publicKeyCredentialRequestOptions) as PublicKeyCredential
+
+          if (!credential) {
+            throw new Error('Failed to get credential')
+          }
+
+          const response = credential.response as AuthenticatorAssertionResponse
+
+          // Convert response to JSON format expected by server
+          const authenticationResponse = {
+            id: credential.id,
+            rawId: btoa(String.fromCharCode(...new Uint8Array(credential.rawId))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
+            response: {
+              clientDataJSON: btoa(String.fromCharCode(...new Uint8Array(response.clientDataJSON))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
+              authenticatorData: btoa(String.fromCharCode(...new Uint8Array(response.authenticatorData))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
+              signature: btoa(String.fromCharCode(...new Uint8Array(response.signature))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
+              userHandle: response.userHandle ? btoa(String.fromCharCode(...new Uint8Array(response.userHandle))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '') : null,
+            },
+            type: credential.type,
+            clientExtensionResults: credential.getClientExtensionResults(),
+            authenticatorAttachment: (credential as any).authenticatorAttachment,
+          }
+
+          ws.send(JSON.stringify(authenticationResponse))
+        } catch (error: any) {
+          ws.close()
+          reject(new Error(error.message || 'Authentication failed'))
+        }
+      }
+
+      ws.onerror = () => {
+        reject(new Error('WebSocket error during authentication'))
+      }
+
+      ws.onclose = (event) => {
+        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 || '',
+  }
+}
+
+/**
+ * Validate a session token via the API.
+ */
+export async function validateSession(
+  page: Page,
+  baseUrl: string,
+  sessionToken: string
+): Promise<{ valid: boolean; ctx: SessionContext; renewed: boolean }> {
+  const cookieName = getSessionCookieName()
+  const response = await page.request.post(`${baseUrl}/auth/api/validate`, {
+    headers: {
+      'Cookie': `${cookieName}=${sessionToken}`,
+    },
+  })
+  return await response.json()
+}
+
+/**
+ * Get user info via the API.
+ */
+export async function getUserInfo(
+  page: Page,
+  baseUrl: string,
+  sessionToken: string
+): Promise<UserInfo> {
+  const cookieName = getSessionCookieName()
+  const response = await page.request.get(`${baseUrl}/auth/api/user-info`, {
+    headers: {
+      'Cookie': `${cookieName}=${sessionToken}`,
+    },
+  })
+  return await response.json()
+}
+
+/**
+ * Logout via the API.
+ * If the session being logged out matches the saved session token, clears it.
+ */
+export async function logout(
+  page: Page,
+  baseUrl: string,
+  sessionToken: string
+): Promise<void> {
+  const cookieName = getSessionCookieName()
+  await page.request.post(`${baseUrl}/auth/api/logout`, {
+    headers: {
+      'Cookie': `${cookieName}=${sessionToken}`,
+    },
+  })
+  // Clear saved session token if it matches the one being logged out
+  const savedToken = getSavedSessionToken()
+  if (savedToken === sessionToken) {
+    clearSavedSessionToken()
+  }
+}
+
+/**
+ * Create a device link for adding a new credential to an existing user.
+ */
+export async function createDeviceLink(
+  page: Page,
+  baseUrl: string,
+  sessionToken: string
+): Promise<{ url: string; token: string }> {
+  const cookieName = getSessionCookieName()
+  const response = await page.request.post(`${baseUrl}/auth/api/user/create-link`, {
+    headers: {
+      'Cookie': `${cookieName}=${sessionToken}`,
+    },
+  })
+  if (!response.ok()) {
+    throw new Error(`Failed to create device link: ${response.status()} - ${await response.text()}`)
+  }
+  const data = await response.json()
+  if (!data.url) {
+    throw new Error(`No URL in response: ${JSON.stringify(data)}`)
+  }
+  // Extract token from URL (last path segment)
+  const url = new URL(data.url)
+  const token = url.pathname.split('/').pop() || ''
+  return { url: data.url, token }
+}

e2e/tests/fixtures/virtual-authenticator.ts

@@ -0,0 +1,144 @@
+import { test as base, expect, type CDPSession, type Page } from '@playwright/test'
+import { existsSync, mkdirSync, writeFileSync } from 'fs'
+import { join, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const coverageDir = join(__dirname, '..', '..', 'coverage-frontend')
+
+// Check if frontend coverage is enabled
+const COLLECT_COVERAGE = process.env.COVERAGE === '1' || process.env.COVERAGE === 'true'
+
+/**
+ * Virtual Authenticator configuration for WebAuthn testing.
+ * Uses Chrome DevTools Protocol to create a software authenticator.
+ */
+export interface VirtualAuthenticatorOptions {
+  protocol?: 'ctap1/u2f' | 'ctap2'
+  transport?: 'usb' | 'nfc' | 'ble' | 'internal'
+  hasResidentKey?: boolean
+  hasUserVerification?: boolean
+  isUserVerified?: boolean
+  automaticPresenceSimulation?: boolean
+}
+
+export interface VirtualAuthenticator {
+  authenticatorId: string
+  cdpSession: CDPSession
+}
+
+/**
+ * Create a virtual authenticator using Chrome DevTools Protocol.
+ * This allows fully automated passkey registration and authentication.
+ */
+export async function createVirtualAuthenticator(
+  page: Page,
+  options: VirtualAuthenticatorOptions = {}
+): Promise<VirtualAuthenticator> {
+  const cdpSession = await page.context().newCDPSession(page)
+
+  // Enable WebAuthn in CDP
+  await cdpSession.send('WebAuthn.enable', {
+    enableUI: false, // Suppress any UI prompts
+  })
+
+  // Create the virtual authenticator with resident key support
+  const { authenticatorId } = await cdpSession.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: options.protocol ?? 'ctap2',
+      transport: options.transport ?? 'internal',
+      hasResidentKey: options.hasResidentKey ?? true,
+      hasUserVerification: options.hasUserVerification ?? true,
+      isUserVerified: options.isUserVerified ?? true,
+      automaticPresenceSimulation: options.automaticPresenceSimulation ?? true,
+    },
+  })
+
+  return { authenticatorId, cdpSession }
+}
+
+/**
+ * Remove a virtual authenticator.
+ */
+export async function removeVirtualAuthenticator(
+  authenticator: VirtualAuthenticator
+): Promise<void> {
+  await authenticator.cdpSession.send('WebAuthn.removeVirtualAuthenticator', {
+    authenticatorId: authenticator.authenticatorId,
+  })
+  await authenticator.cdpSession.send('WebAuthn.disable')
+}
+
+/**
+ * Get all credentials stored in a virtual authenticator.
+ */
+export async function getCredentials(
+  authenticator: VirtualAuthenticator
+): Promise<any[]> {
+  const result = await authenticator.cdpSession.send('WebAuthn.getCredentials', {
+    authenticatorId: authenticator.authenticatorId,
+  })
+  return result.credentials
+}
+
+/**
+ * Extended test fixture with virtual authenticator support and optional coverage.
+ */
+export const test = base.extend<{
+  virtualAuthenticator: VirtualAuthenticator
+}>({
+  virtualAuthenticator: async ({ page }, use, testInfo) => {
+    // Start coverage collection if enabled
+    let coverageCdp: CDPSession | null = null
+    if (COLLECT_COVERAGE) {
+      try {
+        coverageCdp = await page.context().newCDPSession(page)
+        await coverageCdp.send('Profiler.enable')
+        await coverageCdp.send('Profiler.startPreciseCoverage', {
+          callCount: true,
+          detailed: true,
+        })
+      } catch {
+        coverageCdp = null
+      }
+    }
+
+    // Create virtual authenticator before test
+    const authenticator = await createVirtualAuthenticator(page)
+
+    // Run the test
+    await use(authenticator)
+
+    // Cleanup after test
+    await removeVirtualAuthenticator(authenticator)
+
+    // Stop and save coverage
+    if (coverageCdp) {
+      try {
+        const { result } = await coverageCdp.send('Profiler.takePreciseCoverage')
+        await coverageCdp.send('Profiler.stopPreciseCoverage')
+        await coverageCdp.send('Profiler.disable')
+
+        // Filter to only include our app's JavaScript files
+        const appCoverage = result.filter((entry: any) =>
+          entry.url.includes('/auth/') &&
+          entry.url.endsWith('.js') &&
+          !entry.url.includes('node_modules')
+        )
+
+        if (appCoverage.length > 0) {
+          if (!existsSync(coverageDir)) {
+            mkdirSync(coverageDir, { recursive: true })
+          }
+          const safeName = testInfo.title.replace(/[^a-z0-9]/gi, '_').substring(0, 50)
+          const coverageFile = join(coverageDir, `coverage-${safeName}-${Date.now()}.json`)
+          writeFileSync(coverageFile, JSON.stringify(appCoverage, null, 2))
+        }
+      } catch {
+        // Silently ignore coverage collection errors
+      }
+    }
+  },
+})
+
+export { expect }

e2e/tests/global-setup.ts

@@ -0,0 +1,139 @@
+import { execSync, spawn } from 'child_process'
+import { join, dirname } from 'path'
+import { existsSync, mkdirSync, writeFileSync } from 'fs'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const testDataDir = join(__dirname, '..', 'test-data')
+const stateFile = join(testDataDir, 'test-state.json')
+const projectRoot = join(__dirname, '..', '..')
+
+// Check if coverage is enabled
+const COLLECT_COVERAGE = process.env.COVERAGE === '1' || process.env.COVERAGE === 'true'
+
+interface TestState {
+  resetToken?: string
+  serverPid?: number
+  sessionCookie?: string
+}
+
+/**
+ * Global setup for E2E tests.
+ *
+ * Uses in-memory SQLite database for fast, isolated tests.
+ * Captures the bootstrap reset token for initial user registration.
+ */
+export default async function globalSetup() {
+  console.log('\n🔧 Setting up E2E test environment...\n')
+
+  // Create test data directory for state file
+  if (!existsSync(testDataDir)) {
+    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')
+  }
+
+  const state: TestState = {}
+
+  // Build server command - with or without coverage
+  const serverArgs = COLLECT_COVERAGE
+    ? [
+        'run', 'coverage', 'run', '--parallel-mode',
+        '-m', 'paskia', '-l', 'localhost:4404',
+        '--rp-id', 'localhost'
+      ]
+    : [
+        'run', 'paskia', '-l', 'localhost:4404',
+        '--rp-id', 'localhost'
+      ]
+
+  // Use a fresh database file for tests
+  const testDbFile = join(testDataDir, 'test.paskiadb')
+
+  // Start the server using Node's spawn
+  const serverProcess = spawn('uv', serverArgs, {
+    cwd: projectRoot,
+    env: {
+      ...process.env,
+      PASKIA_DB: testDbFile,
+      COVERAGE_FILE: join(projectRoot, '.coverage'),
+    },
+    stdio: ['ignore', 'pipe', 'pipe'],
+  })
+
+  state.serverPid = serverProcess.pid
+
+  // Capture output to find reset token
+  const resetTokenPromise = new Promise<string>((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      reject(new Error('Timed out waiting for server bootstrap (30s)'))
+    }, 30000)
+
+    let output = ''
+
+    const handleData = (data: Buffer) => {
+      const text = data.toString()
+      output += text
+      process.stdout.write(text) // Echo to console
+
+      // Look for the reset token URL in the output
+      // Format: https://localhost/auth/{token} or http://localhost:4404/auth/{token}
+      // where token is word.word.word.word.word (dot separated)
+      const match = output.match(/https?:\/\/localhost(?::\d+)?\/auth\/([a-z]+(?:\.[a-z]+)+)/)
+      if (match) {
+        clearTimeout(timeout)
+        // Wait a bit for server to fully start
+        setTimeout(() => resolve(match[1]), 1000)
+      }
+    }
+
+    serverProcess.stdout?.on('data', handleData)
+    serverProcess.stderr?.on('data', handleData)
+
+    serverProcess.on('error', (err) => {
+      clearTimeout(timeout)
+      reject(err)
+    })
+
+    serverProcess.on('exit', (code) => {
+      if (code !== 0 && code !== null) {
+        clearTimeout(timeout)
+        reject(new Error(`Server exited with code ${code}`))
+      }
+    })
+  })
+
+  try {
+    state.resetToken = await resetTokenPromise
+    console.log(`\n  ✅ Captured reset token: ${state.resetToken}\n`)
+  } catch (err) {
+    console.error('Failed to capture reset token:', err)
+    serverProcess.kill()
+    throw err
+  }
+
+  // Fetch session cookie name from server settings
+  try {
+    const response = await fetch('http://localhost:4404/auth/api/settings')
+    const settings = await response.json()
+    state.sessionCookie = settings.session_cookie
+    console.log(`  ✅ Session cookie name: ${state.sessionCookie}\n`)
+  } catch (err) {
+    console.error('Failed to fetch settings:', err)
+    serverProcess.kill()
+    throw err
+  }
+
+  // Save state for tests
+  writeFileSync(stateFile, JSON.stringify(state, null, 2))
+
+  console.log('  ✅ E2E test environment ready\n')
+}

e2e/tests/global-teardown.ts

@@ -0,0 +1,141 @@
+import { join, dirname } from 'path'
+import { existsSync, rmSync, readFileSync, readdirSync, writeFileSync } from 'fs'
+import { fileURLToPath } from 'url'
+import { execSync } from 'child_process'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const testDataDir = join(__dirname, '..', 'test-data')
+const stateFile = join(testDataDir, 'test-state.json')
+const projectRoot = join(__dirname, '..', '..')
+const coverageDir = join(__dirname, '..', 'coverage-frontend')
+
+// Check if coverage is enabled
+const COLLECT_COVERAGE = process.env.COVERAGE === '1' || process.env.COVERAGE === 'true'
+
+interface TestState {
+  resetToken?: string
+  serverPid?: number
+}
+
+interface CoverageEntry {
+  url: string
+  functions: Array<{
+    functionName: string
+    ranges: Array<{ count: number }>
+  }>
+}
+
+/**
+ * Global teardown for E2E tests.
+ *
+ * This cleans up the test server and optionally removes the test database.
+ */
+export default async function globalTeardown() {
+  console.log('\n🧹 Cleaning up E2E test environment...\n')
+
+  // Read state file to get server PID
+  if (existsSync(stateFile)) {
+    try {
+      const state: TestState = JSON.parse(readFileSync(stateFile, 'utf-8'))
+
+      if (state.serverPid) {
+        console.log(`  Stopping server (PID: ${state.serverPid})...`)
+        try {
+          process.kill(state.serverPid, 'SIGTERM')
+          // Wait longer for graceful shutdown and coverage data flush
+          await new Promise(r => setTimeout(r, COLLECT_COVERAGE ? 2000 : 500))
+        } catch (err: any) {
+          // Process may already be dead
+          if (err.code !== 'ESRCH') {
+            console.warn(`  Warning: Could not kill server: ${err.message}`)
+          }
+        }
+      }
+    } catch (err) {
+      console.warn('  Warning: Could not read state file')
+    }
+
+    // Clean up state file
+    rmSync(stateFile, { force: true })
+  }
+
+  // Clean up test database
+  const testDbFile = join(testDataDir, 'test.paskiadb')
+  if (existsSync(testDbFile)) {
+    console.log('  Removing test database...')
+    rmSync(testDbFile)
+  }
+
+  // Generate Python coverage report if coverage was collected
+  if (COLLECT_COVERAGE) {
+    console.log('  📊 Generating Python coverage report...')
+    try {
+      // Combine parallel coverage data and generate reports
+      execSync('uv run coverage combine', { cwd: projectRoot, stdio: 'inherit' })
+      execSync('uv run coverage report', { cwd: projectRoot, stdio: 'inherit' })
+      execSync('uv run coverage html', { cwd: projectRoot, stdio: 'inherit' })
+      console.log(`  ✅ Python coverage report: ${join(projectRoot, 'coverage-html', 'index.html')}\n`)
+    } catch (err: any) {
+      console.warn(`  Warning: Failed to generate coverage report: ${err.message}`)
+    }
+
+    // Merge and report frontend coverage
+    if (existsSync(coverageDir)) {
+      try {
+        const files = readdirSync(coverageDir).filter(f => f.startsWith('coverage-') && f.endsWith('.json') && f !== 'coverage-merged.json')
+
+        if (files.length > 0) {
+          const merged: Map<string, CoverageEntry> = new Map()
+
+          for (const file of files) {
+            const data: CoverageEntry[] = JSON.parse(readFileSync(join(coverageDir, file), 'utf-8'))
+            for (const entry of data) {
+              const existing = merged.get(entry.url)
+              if (!existing) {
+                merged.set(entry.url, entry)
+              } else {
+                // Merge function coverage counts
+                for (const func of entry.functions) {
+                  const existingFunc = existing.functions.find(f => f.functionName === func.functionName)
+                  if (existingFunc) {
+                    for (let i = 0; i < func.ranges.length && i < existingFunc.ranges.length; i++) {
+                      existingFunc.ranges[i].count += func.ranges[i].count
+                    }
+                  } else {
+                    existing.functions.push(func)
+                  }
+                }
+              }
+            }
+          }
+
+          // Write merged coverage
+          writeFileSync(
+            join(coverageDir, 'coverage-merged.json'),
+            JSON.stringify(Array.from(merged.values()), null, 2)
+          )
+
+          // Generate simple coverage summary
+          let totalFunctions = 0
+          let coveredFunctions = 0
+
+          for (const entry of merged.values()) {
+            for (const func of entry.functions) {
+              totalFunctions++
+              const hasCoverage = func.ranges.some(r => r.count > 0)
+              if (hasCoverage) coveredFunctions++
+            }
+          }
+
+          const percentage = totalFunctions > 0 ? Math.round((coveredFunctions / totalFunctions) * 100) : 0
+          console.log(`  📊 Frontend JS Coverage: ${coveredFunctions}/${totalFunctions} functions (${percentage}%)`)
+          console.log(`  ✅ Frontend coverage data: ${coverageDir}/coverage-merged.json\n`)
+        }
+      } catch (err: any) {
+        console.warn(`  Warning: Failed to merge frontend coverage: ${err.message}`)
+      }
+    }
+  }
+
+  console.log('  ✅ Cleanup complete\n')
+}

e2e/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "types": ["node"]
+  },
+  "include": ["tests/**/*.ts", "playwright.config.ts"],
+  "exclude": ["node_modules"]
+}

examples/index.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Paskia - Dev Mode</title>
+    <style>
+        :root {
+            color-scheme: light dark;  /* Automatic themes by browser */
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🔐 Paskia - Development Server</h1>
+            <p class="subtitle">The following features are available after you have registered your Admin account and logged in. You should also use the Admin Site to create non-privileged users to see the Forbidden dialog caused by missing permissions.</p>
+        </header>
+
+        <div class="content">
+            <div class="section">
+                <h2>Management Site</h2>
+                <button onclick="window.open('/auth/', '_blank')">👤 User Profile</button>
+                <button onclick="window.open('/auth/admin/', '_blank')">⚙️ Admin Panel</button>
+            </div>
+
+            <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', '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>
+            </div>
+
+            <div class="section">
+                <h2>Browser Mode (full page)</h2>
+                <p>Block access to otherwise open site - intended for forward-auth mechanism (Caddy, Nginx):</p>
+                <button onclick="browserNav('/auth/api/forward')">🔐 Basic Auth</button>
+                <button onclick="browserNav('/auth/api/forward?max_age=10s')">🔄 Reauth (max_age=10s)</button>
+                <button onclick="browserNav('/auth/api/forward?perm=auth:admin')">🛡️ Admin Only</button>
+            </div>
+
+            <pre id="output">Click a button to test...</pre>
+        </div>
+    </div>
+
+    <script type="module">
+        import { apiFetch, apiJson, AuthCancelledError } from '/paskia-js/dist/paskia.js'
+
+        const output = document.getElementById('output');
+
+        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.
+        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');
+        }
+    </script>
+</body>
+</html>

frontend/admin/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Admin</title>
-  </head>
-  <body>
-    <div id="admin-app"></div>
-    <script type="module" src="/src/admin/main.js"></script>
-  </body>
-  </html>

frontend/auth/App.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="app-shell">
+    <StatusMessage />
+    <main class="app-main">
+      <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>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { apiJson, SessionValidator } 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 AccessDenied from '@/components/AccessDenied.vue'
+
+const store = useAuthStore()
+const viewState = ref('loading')  // 'loading' | 'profile' | 'terminal'
+const loadingMessage = ref('Loading...')
+
+/**
+ * Normalize a host string for comparison (lowercase, strip default ports).
+ */
+function normalizeHost(raw) {
+  if (!raw) return null
+  const trimmed = raw.trim().toLowerCase()
+  if (!trimmed) return null
+  // Remove default ports
+  return trimmed.replace(/:80$/, '').replace(/:443$/, '')
+}
+
+/**
+ * Host mode is active when an auth_host is configured AND the current host differs from it.
+ * In host mode, we show a limited profile view with logout and link to full profile.
+ */
+const isHostMode = computed(() => {
+  const authHost = store.settings?.auth_host
+  if (!authHost) return false
+  const currentHost = normalizeHost(window.location.host)
+  const configuredHost = normalizeHost(authHost)
+  return currentHost !== configuredHost
+})
+
+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 {
+    // 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' }),
+      apiJson('/auth/api/user-info', { method: 'GET' })
+    ])
+    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
+    }
+    viewState.value = 'profile'
+  } catch (e) {
+    onSessionLost(e)
+  }
+}
+
+onMounted(async () => {
+  // Load settings
+  await store.loadSettings()
+
+  // Set appropriate page title based on mode
+  const rpName = store.settings?.rp_name
+  if (rpName) {
+    // In host mode, show "account summary" style title
+    // Settings are loaded but isHostMode depends on them, so check here
+    const authHost = store.settings?.auth_host
+    const inHostMode = authHost && normalizeHost(window.location.host) !== normalizeHost(authHost)
+    document.title = inHostMode ? `${rpName} · Account summary` : rpName
+  }
+
+  // Load user info (apiJson handles auth iframe if needed)
+  await loadUserInfo()
+})
+</script>

frontend/auth/admin/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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="/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

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<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="/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

@@ -0,0 +1,91 @@
+<template>
+  <RestrictedAuth
+    :mode="authMode"
+    :remote-auth-token="remoteAuthToken"
+    :oidc-query-string="oidcQueryString"
+    @authenticated="handleAuthenticated"
+    @back="handleBack"
+  />
+</template>
+
+<script setup>
+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
+  const match = path.match(/\/auth\/([^/]+)$/)
+  if (match) {
+    const token = match[1]
+    // Validate it looks like a 5-word passphrase
+    const parts = token.split('.')
+    if (parts.length === 5 && parts.every(p => p.length > 0)) {
+      return token
+    }
+  }
+  return null
+}
+
+// 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) {
+    window.parent.postMessage(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,
+    exchangeCode: result.exchange_code
+  })
+}
+
+function handleBack() {
+  postToParent({
+    type: 'auth-back'
+  })
+}
+
+onMounted(() => {
+  // Check for remote auth token in URL
+  remoteAuthToken.value = extractRemoteToken()
+
+  postToParent({
+    type: 'auth-ready'
+  })
+
+  window.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      handleBack()
+    }
+  })
+})
+</script>

frontend/auth/restricted/index.html

@@ -0,0 +1,13 @@
+<!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

@@ -0,0 +1,7 @@
+import './theme.js'
+import { createApp } from 'vue'
+import RestrictedApi from './RestrictedApi.vue'
+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/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Auth Profile</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>

frontend/int/forward/RestrictedForward.vue

@@ -0,0 +1,45 @@
+<template>
+  <RestrictedAuth
+    :mode="authMode"
+    @authenticated="handleAuthenticated"
+    @back="goBack"
+    @home="returnHome"
+  />
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+import RestrictedAuth from '@/components/RestrictedAuth.vue'
+import { uiBasePath } from '@/utils/settings'
+import { goBack } from '@/utils/helpers'
+
+const basePath = computed(() => uiBasePath())
+
+// Detect mode from data attribute on html tag only
+// (RestrictedApi uses URL query, RestrictedForward uses data injected by server)
+const authMode = computed(() => {
+  const htmlElement = document.documentElement
+  const dataMode = htmlElement.getAttribute('data-mode')
+  if (dataMode === 'reauth') return 'reauth'
+  if (dataMode === 'forbidden') return 'forbidden'
+  return 'login'
+})
+
+function handleAuthenticated() {
+  // Reload page to re-trigger forward auth validation
+  location.reload()
+}
+
+function returnHome() {
+  const target = basePath.value || '/auth/'
+  if (window.location.pathname !== target) history.replaceState(null, '', target)
+  window.location.href = target
+}
+
+onMounted(() => {
+  // Handle Escape key to trigger back navigation
+  window.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') goBack()
+  })
+})
+</script>

frontend/int/forward/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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>
+    <script type="module" src="/int/forward/main.js"></script>
+  </body>
+</html>

frontend/int/forward/main.js

@@ -0,0 +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

@@ -0,0 +1,224 @@
+<template>
+  <div class="app-shell">
+    <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 reset-container">
+        <header class="view-header center">
+          <h1>🔑 Registration</h1>
+          <p class="view-lede">
+            {{ subtitleMessage }}
+          </p>
+        </header>
+
+        <section class="section-block" v-if="initializing">
+          <div class="section-body center">
+            <p>Loading reset details…</p>
+          </div>
+        </section>
+
+        <section class="section-block" v-else-if="!canRegister">
+          <div class="section-body center">
+            <div class="button-row button-row--center">
+              <button class="btn-secondary" @click="goHome">Return to sign-in</button>
+            </div>
+          </div>
+        </section>
+
+        <section class="section-block" v-else>
+          <div class="section-body">
+            <label class="name-edit">
+              <span>👤 Name</span>
+              <input
+                type="text"
+                v-model="displayName"
+                :disabled="loading"
+                maxlength="64"
+                @keyup.enter="registerPasskey"
+              />
+            </label>
+            <button
+              class="btn-primary"
+              :disabled="loading"
+              @click="registerPasskey"
+            >
+              {{ loading ? 'Registering…' : 'Register Passkey' }}
+            </button>
+          </div>
+        </section>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import passkey from '@/utils/passkey'
+import { getSettings, uiBasePath } from '@/utils/settings'
+import { apiJson, ApiError, getUserFriendlyErrorMessage } from 'paskia'
+import { updateThemeFromSession } from '@/utils/theme'
+
+const status = reactive({
+  show: false,
+  message: '',
+  type: 'info'
+})
+
+const initializing = ref(true)
+const loading = ref(false)
+const token = ref('')
+const settings = ref(null)
+const tokenInfo = ref(null)
+const displayName = ref('')
+const errorMessage = ref('')
+let statusTimer = null
+
+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}. The name entered will be stored on your passkey and on our system.`
+})
+
+const basePath = computed(() => uiBasePath())
+
+const canRegister = computed(() => !!(token.value && tokenInfo.value))
+
+function showMessage(message, type = 'info', duration = 3000) {
+  status.show = true
+  status.message = message
+  status.type = type
+  if (statusTimer) clearTimeout(statusTimer)
+  if (duration > 0) {
+    statusTimer = setTimeout(() => {
+      status.show = false
+    }, duration)
+  }
+}
+
+async function fetchSettings() {
+  try {
+    const data = await getSettings()
+    settings.value = data
+    if (data?.rp_name) document.title = `${data.rp_name} · Passkey Setup`
+  } catch (error) {
+    console.warn('Unable to load settings', error)
+  }
+}
+
+async function fetchTokenInfo() {
+  if (!token.value) return
+  try {
+    tokenInfo.value = await apiJson('/auth/api/token-info', {
+      method: 'GET',
+      headers: { 'Authorization': `Bearer ${token.value}` },
+    })
+    displayName.value = tokenInfo.value.display_name
+    if (tokenInfo.value.theme) updateThemeFromSession({ user: { theme: tokenInfo.value.theme } })
+  } catch (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)
+    errorMessage.value = message
+  }
+}
+
+async function registerPasskey() {
+  if (!canRegister.value || loading.value) return
+  loading.value = true
+  showMessage('Starting passkey registration…', 'info')
+
+  let result
+  try {
+    const nameValue = displayName.value.trim() || null
+    result = await passkey.register(token.value, nameValue)
+  } catch (error) {
+    loading.value = false
+    const message = error?.message || 'Passkey registration cancelled'
+    const cancelled = message === 'Passkey registration cancelled'
+    showMessage(cancelled ? message : `Registration failed: ${message}`, cancelled ? 'info' : 'error', 4000)
+    return
+  }
+
+  try {
+    await exchangeCode(result)
+  } catch (error) {
+    loading.value = false
+    const message = error?.message || 'Failed to establish session'
+    showMessage(message, 'error', 4000)
+    return
+  }
+
+  showMessage('Passkey registered successfully!', 'success', 800)
+  setTimeout(() => { loading.value = false; goHome() }, 800)
+}
+
+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.exchange_code}` }
+  })
+}
+
+function goHome() {
+  const target = uiBasePath.value || '/auth/'
+  if (window.location.pathname !== target) {
+    history.replaceState(null, '', target)
+  }
+  window.location.reload()
+}
+
+function extractTokenFromPath() {
+  const segments = window.location.pathname.split('/').filter(Boolean)
+  if (!segments.length) return ''
+  const candidate = segments[segments.length - 1]
+  const prefix = segments.slice(0, -1)
+  if (prefix.length > 1) return ''
+  if (prefix.length === 1 && prefix[0] !== 'auth') return ''
+  if (!candidate.includes('.')) return ''
+  return candidate
+}
+
+onMounted(async () => {
+  token.value = extractTokenFromPath()
+  await fetchSettings()
+  if (!token.value) {
+    const message = 'Reset link is missing or malformed.'
+    errorMessage.value = message
+    showMessage(message, 'error', 0)
+    initializing.value = false
+    return
+  }
+  await fetchTokenInfo()
+  initializing.value = false
+})
+</script>
+
+<style scoped>
+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;
+  flex-direction: column;
+  gap: 1.75rem;
+}
+
+.section-body {
+  gap: 1.25rem;
+}
+
+.name-edit span {
+  color: var(--color-text-muted);
+  font-size: 0.9rem;
+}
+</style>

frontend/int/reset/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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>
+    <script type="module" src="/int/reset/main.js"></script>
+  </body>
+</html>

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

frontend/reset/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Complete Passkey Setup</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/reset/main.js"></script>
-  </body>
-</html>

frontend/restricted/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Access Restricted</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/restricted/main.js"></script>
-  </body>
-</html>

frontend/src/App.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="app-shell">
-    <StatusMessage />
-    <main class="app-main">
-      <!-- Only render views after authentication status is determined -->
-      <template v-if="initialized">
-        <LoginView v-if="store.currentView === 'login'" />
-        <ProfileView v-if="store.currentView === 'profile'" />
-        <DeviceLinkView v-if="store.currentView === 'device-link'" />
-      </template>
-      <!-- Show loading state while determining auth status -->
-      <div v-else class="loading-container">
-        <div class="loading-spinner"></div>
-        <p>Loading...</p>
-      </div>
-    </main>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref } from 'vue'
-import { useAuthStore } from '@/stores/auth'
-import StatusMessage from '@/components/StatusMessage.vue'
-import LoginView from '@/components/LoginView.vue'
-import ProfileView from '@/components/ProfileView.vue'
-import DeviceLinkView from '@/components/DeviceLinkView.vue'
-const store = useAuthStore()
-const initialized = ref(false)
-
-onMounted(async () => {
-  // Load branding / settings first (non-blocking for auth flow)
-  await store.loadSettings()
-  // Was an error message passed in the URL hash?
-  const message = location.hash.substring(1)
-  if (message) {
-    store.showMessage(decodeURIComponent(message), 'error')
-    history.replaceState(null, '', location.pathname)
-  }
-  try {
-    await store.loadUserInfo()
-  } catch (error) {
-    console.log('Failed to load user info:', error)
-  } finally {
-    initialized.value = true
-    store.selectView()
-  }
-})
-</script>
-
-<style scoped>
-.loading-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  gap: 1rem;
-}
-
-.loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid var(--color-border);
-  border-top: 4px solid 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;
-}
-</style>

frontend/src/admin/AdminApp.vue

@@ -1,575 +0,0 @@
-<script setup>
-import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
-import Breadcrumbs from '@/components/Breadcrumbs.vue'
-import CredentialList from '@/components/CredentialList.vue'
-import UserBasicInfo from '@/components/UserBasicInfo.vue'
-import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
-import StatusMessage from '@/components/StatusMessage.vue'
-import AdminOverview from './AdminOverview.vue'
-import AdminOrgDetail from './AdminOrgDetail.vue'
-import AdminUserDetail from './AdminUserDetail.vue'
-import AdminDialogs from './AdminDialogs.vue'
-import { useAuthStore } from '@/stores/auth'
-
-const info = ref(null)
-const loading = ref(true)
-const error = ref(null)
-const orgs = ref([])
-const permissions = ref([])
-const currentOrgId = ref(null) // UUID of selected org for detail view
-const currentUserId = ref(null) // UUID for user detail view
-const userDetail = ref(null) // cached user detail object
-const userLink = ref(null) // latest generated registration link
-const userLinkExpires = ref(null)
-const authStore = useAuthStore()
-const addingOrgForPermission = ref(null)
-const PERMISSION_ID_PATTERN = '^[A-Za-z0-9:._~-]+$'
-const editingPermId = ref(null)
-const renameIdValue = ref('')
-const editingPermDisplay = ref(null)
-const renameDisplayValue = ref('')
-const dialog = ref({ type: null, data: null, busy: false, error: '' })
-const safeIdRegex = /[^A-Za-z0-9:._~-]/g
-
-function sanitizeRenameId() { if (renameIdValue.value) renameIdValue.value = renameIdValue.value.replace(safeIdRegex, '') }
-
-function handleGlobalClick(e) {
-  if (!addingOrgForPermission.value) return
-  const menu = e.target.closest('.org-add-menu')
-  const trigger = e.target.closest('.add-org-btn')
-  if (!menu && !trigger) {
-    addingOrgForPermission.value = null
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleGlobalClick)
-})
-onBeforeUnmount(() => {
-  document.removeEventListener('click', handleGlobalClick)
-})
-
-// Build a summary: for each permission id -> { orgs: Set(org_display_name), userCount }
-const permissionSummary = computed(() => {
-  const summary = {}
-  for (const o of orgs.value) {
-    const orgBase = { uuid: o.uuid, display_name: o.display_name }
-    const orgPerms = new Set(o.permissions || [])
-    
-    // Org-level permissions (direct) - only count if org can grant them
-    for (const pid of o.permissions || []) {
-      if (!summary[pid]) summary[pid] = { orgs: [], orgSet: new Set(), userCount: 0 }
-      if (!summary[pid].orgSet.has(o.uuid)) {
-        summary[pid].orgs.push(orgBase)
-        summary[pid].orgSet.add(o.uuid)
-      }
-    }
-    
-    // Role-based permissions (inheritance) - only count if org can grant them
-    for (const r of o.roles) {
-      for (const pid of r.permissions) {
-        // Only count if the org can grant this permission
-        if (!orgPerms.has(pid)) continue
-        
-        if (!summary[pid]) summary[pid] = { orgs: [], orgSet: new Set(), userCount: 0 }
-        if (!summary[pid].orgSet.has(o.uuid)) {
-          summary[pid].orgs.push(orgBase)
-          summary[pid].orgSet.add(o.uuid)
-        }
-        summary[pid].userCount += r.users.length
-      }
-    }
-  }
-  const display = {}
-  for (const [pid, v] of Object.entries(summary)) {
-    display[pid] = { orgs: v.orgs.sort((a,b)=>a.display_name.localeCompare(b.display_name)), userCount: v.userCount }
-  }
-  return display
-})
-
-function renamePermissionDisplay(p) { openDialog('perm-display', { permission: p, id: p.id, display_name: p.display_name }) }
-
-async function refreshPermissionsContext() {
-  // Reload both lists so All Permissions table shows new associations promptly.
-  await Promise.all([loadPermissions(), loadOrgs()])
-}
-
-async function attachPermissionToOrg(pid, orgUuid) {
-  if (!orgUuid) return
-  try {
-    const params = new URLSearchParams({ permission_id: pid })
-    const res = await fetch(`/auth/admin/orgs/${orgUuid}/permission?${params.toString()}`, { method: 'POST' })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
-    await loadOrgs()
-  } catch (e) {
-  authStore.showMessage(e.message || 'Failed to add permission to org')
-  }
-}
-
-async function detachPermissionFromOrg(pid, orgUuid) {
-  openDialog('confirm', { message: 'Remove permission from this org?', action: async () => {
-    try {
-      const params = new URLSearchParams({ permission_id: pid })
-      const res = await fetch(`/auth/admin/orgs/${orgUuid}/permission?${params.toString()}`, { method: 'DELETE' })
-      const data = await res.json()
-      if (data.detail) throw new Error(data.detail)
-      await loadOrgs()
-    } catch (e) {
-      authStore.showMessage(e.message || 'Failed to remove permission from org')
-    }
-  } })
-}
-
-function parseHash() {
-  const h = window.location.hash || ''
-  currentOrgId.value = null
-  currentUserId.value = null
-  if (h.startsWith('#org/')) {
-    currentOrgId.value = h.slice(5)
-  } else if (h.startsWith('#user/')) {
-    currentUserId.value = h.slice(6)
-  }
-}
-
-async function loadOrgs() {
-  const res = await fetch('/auth/admin/orgs')
-  const data = await res.json()
-  if (data.detail) throw new Error(data.detail)
-  // Restructure to attach users to roles instead of flat user list at org level
-  orgs.value = data.map(o => {
-    const roles = o.roles.map(r => ({ ...r, org_uuid: o.uuid, users: [] }))
-    const roleMap = Object.fromEntries(roles.map(r => [r.display_name, r]))
-    for (const u of o.users || []) {
-      if (roleMap[u.role]) roleMap[u.role].users.push(u)
-    }
-    return { ...o, roles }
-  })
-}
-
-async function loadPermissions() {
-  const res = await fetch('/auth/admin/permissions')
-  const data = await res.json()
-  if (data.detail) throw new Error(data.detail)
-  permissions.value = data
-}
-
-async function load() {
-  loading.value = true
-  error.value = null
-  try {
-  const res = await fetch('/auth/api/user-info', { method: 'POST' })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
-    info.value = data
-    if (data.authenticated && (data.is_global_admin || data.is_org_admin)) {
-      await Promise.all([loadOrgs(), loadPermissions()])
-    }
-    // After loading orgs decide view if not global admin
-    if (!data.is_global_admin && data.is_org_admin && orgs.value.length === 1) {
-      if (!window.location.hash || window.location.hash === '#overview') {
-        currentOrgId.value = orgs.value[0].uuid
-        window.location.hash = `#org/${currentOrgId.value}`
-        authStore.showMessage(`Navigating to ${orgs.value[0].display_name} Administration`, 'info', 3000)
-      } else {
-        parseHash()
-      }
-    } else parseHash()
-  } catch (e) {
-    error.value = e.message
-  } finally {
-    loading.value = false
-  }
-}
-
-// Org actions
-function createOrg() { openDialog('org-create', {}) }
-
-function updateOrg(org) { openDialog('org-update', { org, name: org.display_name }) }
-
-function editUserName(user) { openDialog('user-update-name', { user, name: user.display_name }) }
-
-function deleteOrg(org) {
-  if (!info.value?.is_global_admin) { authStore.showMessage('Global admin only'); return }
-  openDialog('confirm', { message: `Delete organization ${org.display_name}?`, action: async () => {
-    const res = await fetch(`/auth/admin/orgs/${org.uuid}`, { method: 'DELETE' })
-    const data = await res.json(); if (data.detail) throw new Error(data.detail)
-    await Promise.all([loadOrgs(), loadPermissions()])
-  } })
-}
-
-function createUserInRole(org, role) { openDialog('user-create', { org, role }) }
-
-async function moveUserToRole(org, user, targetRoleDisplayName) {
-  if (user.role === targetRoleDisplayName) return
-  const res = await fetch(`/auth/admin/orgs/${org.uuid}/users/${user.uuid}/role`, {
-    method: 'PUT',
-    headers: { 'content-type': 'application/json' },
-    body: JSON.stringify({ role: targetRoleDisplayName })
-  })
-  const data = await res.json()
-  if (data.detail) { authStore.showMessage(data.detail); return }
-  await loadOrgs()
-}
-
-function onUserDragStart(e, user, org_uuid) {
-  e.dataTransfer.effectAllowed = 'move'
-  e.dataTransfer.setData('text/plain', JSON.stringify({ user_uuid: user.uuid, org_uuid }))
-}
-
-function onRoleDragOver(e) {
-  e.preventDefault()
-  e.dataTransfer.dropEffect = 'move'
-}
-
-function onRoleDrop(e, org, role) {
-  e.preventDefault()
-  try {
-    const data = JSON.parse(e.dataTransfer.getData('text/plain'))
-    if (data.org_uuid !== org.uuid) return // only within same org
-    const user = org.roles.flatMap(r => r.users).find(u => u.uuid === data.user_uuid)
-    if (user) moveUserToRole(org, user, role.display_name)
-  } catch (_) { /* ignore */ }
-}
-
-// (legacy function retained but unused in UI)
-async function addOrgPermission() { /* obsolete */ }
-
-async function removeOrgPermission() { /* obsolete */ }
-
-// Role actions
-function createRole(org) { openDialog('role-create', { org }) }
-
-function updateRole(role) { openDialog('role-update', { role, name: role.display_name }) }
-
-function deleteRole(role) {
-  openDialog('confirm', { message: `Delete role ${role.display_name}?`, action: async () => {
-    const res = await fetch(`/auth/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'DELETE' })
-    const data = await res.json(); if (data.detail) throw new Error(data.detail)
-    await loadOrgs()
-  } })
-}
-
-async function toggleRolePermission(role, pid, checked) {
-  // Calculate new permissions array
-  const newPermissions = checked 
-    ? [...role.permissions, pid] 
-    : role.permissions.filter(p => p !== pid)
-  
-  // Optimistic update
-  const prevPermissions = [...role.permissions]
-  role.permissions = newPermissions
-  
-  try {
-    const res = await fetch(`/auth/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, {
-      method: 'PUT',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ display_name: role.display_name, permissions: newPermissions })
-    })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
-    await loadOrgs()
-  } catch (e) {
-    authStore.showMessage(e.message || 'Failed to update role permission')
-    role.permissions = prevPermissions // revert
-  }
-}
-
-// Permission actions
-function updatePermission(p) { openDialog('perm-display', { permission: p }) }
-
-function deletePermission(p) {
-  openDialog('confirm', { message: `Delete permission ${p.id}?`, action: async () => {
-    const params = new URLSearchParams({ permission_id: p.id })
-    const res = await fetch(`/auth/admin/permission?${params.toString()}`, { method: 'DELETE' })
-    const data = await res.json(); if (data.detail) throw new Error(data.detail)
-    await loadPermissions()
-  } })
-}
-
-onMounted(async () => {
-  window.addEventListener('hashchange', parseHash)
-  await authStore.loadSettings()
-  if (authStore.settings?.rp_name) {
-    document.title = authStore.settings.rp_name + ' Admin'
-  }
-  load()
-})
-
-const selectedOrg = computed(() => orgs.value.find(o => o.uuid === currentOrgId.value) || null)
-
-function openOrg(o) {
-  window.location.hash = `#org/${o.uuid}`
-}
-
-function goOverview() {
-  window.location.hash = '#overview'
-}
-
-function openUser(u) {
-  window.location.hash = `#user/${u.uuid}`
-}
-
-const selectedUser = computed(() => {
-  if (!currentUserId.value) return null
-  for (const o of orgs.value) {
-    for (const r of o.roles) {
-      const u = r.users.find(x => x.uuid === currentUserId.value)
-      if (u) return { ...u, org_uuid: o.uuid, role_display_name: r.display_name }
-    }
-  }
-  return null
-})
-
-const pageHeading = computed(() => {
-  if (selectedUser.value) return 'Admin: User'
-  if (selectedOrg.value) return 'Admin: Org'
-  return (authStore.settings?.rp_name || 'Master') + ' Admin'
-})
-
-// Breadcrumb entries for admin app.
-const breadcrumbEntries = computed(() => {
-  const entries = [
-    { label: 'Auth', href: authStore.uiHref() },
-    { label: 'Admin', href: authStore.adminHomeHref() }
-  ]
-  // Determine organization for user view if selectedOrg not explicitly chosen.
-  let orgForUser = null
-  if (selectedUser.value) {
-    orgForUser = orgs.value.find(o => o.uuid === selectedUser.value.org_uuid) || null
-  }
-  const orgToShow = selectedOrg.value || orgForUser
-  if (orgToShow) {
-    entries.push({ label: orgToShow.display_name, href: `#org/${orgToShow.uuid}` })
-  }
-  if (selectedUser.value) {
-    entries.push({ label: selectedUser.value.display_name || 'User', href: `#user/${selectedUser.value.uuid}` })
-  }
-  return entries
-})
-
-watch(selectedUser, async (u) => {
-  if (!u) { userDetail.value = null; return }
-  try {
-  const res = await fetch(`/auth/admin/orgs/${u.org_uuid}/users/${u.uuid}`)
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
-    userDetail.value = data
-  } catch (e) {
-    userDetail.value = { error: e.message }
-  }
-})
-
-const showRegModal = ref(false)
-function generateUserRegistrationLink(u) {
-  showRegModal.value = true
-}
-
-function onLinkCopied() {
-  authStore.showMessage('Link copied to clipboard!')
-}
-
-function copy(text) {
-  if (!text) return
-  navigator.clipboard.writeText(text)
-    .catch(()=>{})
-}
-
-function permissionDisplayName(id) {
-  return permissions.value.find(p => p.id === id)?.display_name || id
-}
-
-async function toggleOrgPermission(org, permId, checked) {
-  // Build next permission list
-  const has = org.permissions.includes(permId)
-  if (checked && has) return
-  if (!checked && !has) return
-  const next = checked ? [...org.permissions, permId] : org.permissions.filter(p => p !== permId)
-  // Optimistic update
-  const prev = [...org.permissions]
-  org.permissions = next
-  try {
-    const params = new URLSearchParams({ permission_id: permId })
-    const res = await fetch(`/auth/admin/orgs/${org.uuid}/permission?${params.toString()}`, { method: checked ? 'POST' : 'DELETE' })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
-    await loadOrgs()
-  } catch (e) {
-    authStore.showMessage(e.message || 'Failed to update organization permission')
-    org.permissions = prev // revert
-  }
-}
-
-function openDialog(type, data) { dialog.value = { type, data, busy: false, error: '' } }
-function closeDialog() { dialog.value = { type: null, data: null, busy: false, error: '' } }
-
-async function onUserNameSaved() {
-  await loadOrgs()
-  if (selectedUser.value) {
-    try {
-  const r = await fetch(`/auth/admin/orgs/${selectedUser.value.org_uuid}/users/${selectedUser.value.uuid}`)
-      const jd = await r.json()
-      if (!r.ok || jd.detail) throw new Error(jd.detail || 'Reload failed')
-      userDetail.value = jd
-    } catch (e) { authStore.showMessage(e.message || 'Failed to reload user', 'error') }
-  }
-  authStore.showMessage('User renamed', 'success', 1500)
-}
-
-async function submitDialog() {
-  if (!dialog.value.type || dialog.value.busy) return
-  dialog.value.busy = true; dialog.value.error = ''
-  try {
-    const t = dialog.value.type
-    if (t === 'org-create') {
-      const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await fetch('/auth/admin/orgs', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, permissions: [] }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await Promise.all([loadOrgs(), loadPermissions()])
-    } else if (t === 'org-update') {
-      const { org } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await fetch(`/auth/admin/orgs/${org.uuid}`, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, permissions: org.permissions }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
-    } else if (t === 'role-create') {
-      const { org } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await fetch(`/auth/admin/orgs/${org.uuid}/roles`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, permissions: [] }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
-    } else if (t === 'role-update') {
-      const { role } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await fetch(`/auth/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, permissions: role.permissions }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
-    } else if (t === 'user-create') {
-      const { org, role } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await fetch(`/auth/admin/orgs/${org.uuid}/users`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, role: role.display_name }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
-    } else if (t === 'user-update-name') {
-      const { user } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await fetch(`/auth/admin/orgs/${user.org_uuid}/users/${user.uuid}/display-name`, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await onUserNameSaved()
-    } else if (t === 'perm-display') {
-      const { permission } = dialog.value.data
-      const newId = dialog.value.data.id?.trim()
-      const newDisplay = dialog.value.data.display_name?.trim()
-      if (!newDisplay) throw new Error('Display name required')
-      if (!newId) throw new Error('ID required')
-      
-      if (newId !== permission.id) {
-        // ID changed, use rename endpoint
-        const body = { old_id: permission.id, new_id: newId, display_name: newDisplay }
-        const res = await fetch('/auth/admin/permission/rename', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
-        let data; try { data = await res.json() } catch(_) { data = {} }
-        if (!res.ok || data.detail) throw new Error(data.detail || data.error || `Failed (${res.status})`)
-      } else if (newDisplay !== permission.display_name) {
-        // Only display name changed
-        const params = new URLSearchParams({ permission_id: permission.id, display_name: newDisplay })
-        const res = await fetch(`/auth/admin/permission?${params.toString()}`, { method: 'PUT' })
-        const d = await res.json(); if (d.detail) throw new Error(d.detail)
-      }
-      await loadPermissions()
-    } else if (t === 'perm-create') {
-      const id = dialog.value.data.id?.trim(); if (!id) throw new Error('ID required')
-      const display_name = dialog.value.data.display_name?.trim(); if (!display_name) throw new Error('Display name required')
-      const res = await fetch('/auth/admin/permissions', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id, display_name }) })
-      const data = await res.json(); if (data.detail) throw new Error(data.detail)
-      await loadPermissions(); dialog.value.data.display_name = ''; dialog.value.data.id = ''
-    } else if (t === 'confirm') {
-      const action = dialog.value.data.action; if (action) await action()
-    }
-    closeDialog()
-  } catch (e) {
-    dialog.value.error = e.message || 'Error'
-  } finally { dialog.value.busy = false }
-}
-</script>
-
-<template>
-  <div class="app-shell admin-shell">
-    <StatusMessage />
-    <main class="app-main">
-      <section class="view-root view-admin">
-        <div class="view-content view-content--wide">
-          <header class="view-header">
-            <h1>{{ pageHeading }}</h1>
-            <Breadcrumbs :entries="breadcrumbEntries" />
-          </header>
-
-          <section class="section-block admin-section">
-            <div class="section-body admin-section-body">
-              <div v-if="loading" class="surface surface--tight">Loading…</div>
-              <div v-else-if="error" class="surface surface--tight error">{{ error }}</div>
-              <template v-else>
-                <div v-if="!info?.authenticated" class="surface surface--tight">
-                  <p>You must be authenticated.</p>
-                </div>
-                <div v-else-if="!(info?.is_global_admin || info?.is_org_admin)" class="surface surface--tight">
-                  <p>Insufficient permissions.</p>
-                </div>
-                <div v-else class="admin-panels">
-                                    <AdminOverview
-                    v-if="!selectedUser && !selectedOrg && (info.is_global_admin || info.is_org_admin)"
-                    :info="info"
-                    :orgs="orgs"
-                    :permissions="permissions"
-                    :permission-summary="permissionSummary"
-                    @create-org="createOrg"
-                    @open-org="openOrg"
-                    @update-org="updateOrg"
-                    @delete-org="deleteOrg"
-                    @toggle-org-permission="toggleOrgPermission"
-                    @open-dialog="openDialog"
-                    @delete-permission="deletePermission"
-                    @rename-permission-display="renamePermissionDisplay"
-                  />
-
-                  <AdminUserDetail
-                    v-else-if="selectedUser"
-                    :selected-user="selectedUser"
-                    :user-detail="userDetail"
-                    :selected-org="selectedOrg"
-                    :loading="loading"
-                    :show-reg-modal="showRegModal"
-                    @generate-user-registration-link="generateUserRegistrationLink"
-                    @go-overview="goOverview"
-                    @open-org="openOrg"
-                    @on-user-name-saved="onUserNameSaved"
-                    @edit-user-name="editUserName"
-                    @close-reg-modal="showRegModal = false"
-                  />
-                  <AdminOrgDetail
-                    v-else-if="selectedOrg"
-                    :selected-org="selectedOrg"
-                    :permissions="permissions"
-                    @update-org="updateOrg"
-                    @create-role="createRole"
-                    @update-role="updateRole"
-                    @delete-role="deleteRole"
-                    @create-user-in-role="createUserInRole"
-                    @open-user="openUser"
-                    @toggle-role-permission="toggleRolePermission"
-                    @on-role-drag-over="onRoleDragOver"
-                    @on-role-drop="onRoleDrop"
-                    @on-user-drag-start="onUserDragStart"
-                  />
-
-                </div>
-              </template>
-            </div>
-          </section>
-        </div>
-      </section>
-    </main>
-    <AdminDialogs
-      :dialog="dialog"
-      :permission-id-pattern="PERMISSION_ID_PATTERN"
-      @submit-dialog="submitDialog"
-      @close-dialog="closeDialog"
-    />
-  </div>
-</template>
-
-<style scoped>
-.view-admin { padding-bottom: var(--space-3xl); }
-.view-header { display: flex; flex-direction: column; gap: var(--space-sm); }
-.admin-section { margin-top: var(--space-xl); }
-.admin-section-body { display: flex; flex-direction: column; gap: var(--space-xl); }
-.admin-panels { display: flex; flex-direction: column; gap: var(--space-xl); }
-</style>

frontend/src/admin/AdminDialogs.vue

@@ -1,34 +1,29 @@
 <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 emit = defineEmits(['submitDialog', 'closeDialog', 'resetOidcSecret', 'createPermissionForClient'])
-
-const nameInput = ref(null)
-const displayNameInput = ref(null)
 
 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) => {
+// Copy-to-clipboard helper
-  if (newType === 'org-create') {
+const authStore = useAuthStore()
-    nextTick(() => {
+function copyText(value, label) {
-      nameInput.value?.focus()
+  navigator.clipboard.writeText(value).then(() => {
+    authStore.showMessage(`${label} copied to clipboard`, 'success', 1500)
   })
-  } else if (newType === 'perm-display' || newType === 'perm-create') {
+}
-    nextTick(() => {
-      displayNameInput.value?.focus()
-      if (newType === 'perm-display') {
-        displayNameInput.value?.select()
-      }
-    })
-  }
-})
 </script>
 
 <template>
@@ -40,7 +35,8 @@ 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==='confirm'">Confirm</template>
       </h3>
       <form @submit.prevent="$emit('submitDialog')" class="modal-form">
@@ -91,16 +87,20 @@ watch(() => props.dialog.type, (newType) => {
           <label>Display Name
             <input ref="displayNameInput" v-model="dialog.data.display_name" required />
           </label>
-          <label>Permission ID
+          <label>Permission Scope
-            <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:._~-" />
+            <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==='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"
@@ -117,12 +117,28 @@ watch(() => props.dialog.type, (newType) => {
             {{ 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); }
+.optional { font-weight: normal; color: var(--color-text-muted); font-size: 0.85em; }
-.small { font-size: 0.9rem; }
+.oidc-divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-sm) 0; }
-.muted { color: var(--color-text-muted); }
+.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; }
 </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,24 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import draggable from 'vuedraggable'
+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 +28,297 @@ const sortedRoles = computed(() => {
   })
 })
 
-function permissionDisplayName(id) {
+// Get org's grantable permissions as full permission objects (with UUIDs)
-  return props.permissions.find(p => p.id === id)?.display_name || id
+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 roleUsers(roleUuid) {
+  return Object.entries(props.selectedOrg.users)
+    .filter(([_, u]) => u.role === roleUuid)
+    .map(([uuid, u]) => ({ uuid, ...u }))
+    .sort((a, b) => {
+      const nameA = a.display_name.toLowerCase()
+      const nameB = b.display_name.toLowerCase()
+      return nameA.localeCompare(nameB)
+    })
+}
+
+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 permissionDisplayName(scope) {
+  return props.permissions.find(p => p.scope === scope)?.display_name || scope
 }
 
 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">
+  <h2 class="org-title" ref="orgTitleRef" @keydown="handleTitleKeydown" :title="selectedOrg.uuid">
-    <span class="org-name">{{ selectedOrg.display_name }}</span>
+    <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 +333,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">
+          <template v-for="p in orgPermissions" :key="p.uuid">
-            <div class="perm-name" :title="pid">{{ permissionDisplayName(pid) }}</div>
+            <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)"
+                :checked="p.uuid in (r.permissions || {})"
-                @change="e => toggleRolePermission(r, pid, e.target.checked)"
+                @change="e => toggleRolePermission(r, p.uuid, e.target.checked)"
               />
             </div>
             <div class="matrix-cell add-role-cell" />
@@ -70,86 +354,78 @@ 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">
+        <div class="user-list-wrapper">
-          <ul class="user-list">
+          <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
-              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"
+                tabindex="0"
-              @dragstart="e => $emit('onUserDragStart', e, u, selectedOrg.uuid)"
                 @click="$emit('openUser', u)"
+                @keydown.enter="$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">
+          </draggable>
+          <div v-if="roleUserCount(r.uuid) === 0" 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>
         </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-title { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); font-size: 1.65rem; }
-.org-name { font-size: 1.5rem; font-weight: 600; color: var(--color-heading); }
+.org-name { 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; }
 .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; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-lg); justify-content: flex-start; align-items: stretch; }
-.roles-grid { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); }
+.role-column { flex: 0 0 240px; border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; }
-.role-column { flex: 1; min-width: 200px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); }
 .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-list-wrapper { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 5.5rem; }
-.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-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
-.user-chip .meta { font-size: 0.7rem; color: var(--color-text-muted); }
+.user-chip { background: var(--color-accent-strong); color: white; border: none; border-radius: var(--radius-md); padding: 0.45rem 0.6rem; display: flex; justify-content: space-between; gap: var(--space-sm); cursor: grab; }
-.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-chip:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
+.user-chip .meta { font-size: 0.7rem; color: rgba(255, 255, 255, 0.8); }
+.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; }

frontend/src/admin/AdminOverview.vue

@@ -1,58 +1,313 @@
 <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', 'navigateOut'])
+
+// Template refs for navigation
+const orgSection = ref(null)
+const orgActionsRef = ref(null)
+const orgTableRef = ref(null)
+const permMatrixRef = ref(null)
+const permActionsRef = ref(null)
+const permTableRef = ref(null)
+const oidcActionsRef = ref(null)
+const oidcTableRef = 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) {
+// Map OIDC client UUIDs to display names for permission domain column
-  return props.permissions.find(p => p.id === id)?.display_name || id
+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 permissionDisplayName(scope) {
+  return props.permissions.find(p => p.scope === scope)?.display_name || scope
 }
 
 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">
+  <div class="permissions-section" ref="orgSection">
-    <h2>{{ info.is_global_admin ? 'Organizations' : 'Your Organizations' }}</h2>
+    <h2>{{ isMasterAdmin ? 'Organizations' : 'Your Organizations' }}</h2>
-    <div class="actions">
+    <div class="actions" ref="orgActionsRef" @keydown="handleOrgActionsKeydown">
-      <button v-if="info.is_global_admin" @click="$emit('createOrg')">+ Create Org</button>
+      <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>
+            <a href="#org/{{o.uuid}}" @click.prevent="$emit('openOrg', o)">{{ o.org.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>
+            <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 class="center">{{ orgUserCount(o) }}</td>
-          <td v-if="info.is_global_admin" class="center">
+          <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 +315,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 +328,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">
+          <template v-for="p in sortedPermissions" :key="p.uuid">
-            <div class="perm-name" :title="p.id">
+            <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)"
+                :checked="p.uuid in o.permissions"
-                @change="e => $emit('toggleOrgPermission', o, p.id, e.target.checked)"
+                @change="e => $emit('toggleOrgPermission', o, p.uuid, e.target.checked)"
               />
             </div>
           </template>
@@ -98,29 +353,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">
+    <div class="actions" ref="permActionsRef" @keydown="handlePermActionsKeydown">
-      <button v-if="info.is_global_admin" @click="$emit('openDialog', 'perm-create', { display_name: '', id: '' })">+ Create Permission</button>
+      <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 +385,74 @@ 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>
 </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); }
+.perm-id-info { font-size: 0.8rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
-.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; }
+.perm-domain { color: var(--color-text-muted); font-size: 0.9rem; }
-.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-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); }
+/* 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); }
 </style>

frontend/src/admin/AdminUserDetail.vue

@@ -1,74 +1,260 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
 import CredentialList from '@/components/CredentialList.vue'
 import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
+import SessionList from '@/components/SessionList.vue'
 import { useAuthStore } from '@/stores/auth'
+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'])
+const emit = defineEmits(['generateUserRegistrationLink', 'goOverview', 'openOrg', 'onUserNameSaved', 'closeRegModal', 'editUserName', 'refreshUserDetail', 'navigateOut', 'deleteUser'])
 
 const authStore = useAuthStore()
+const terminatingSessions = ref({})
+const hoveredCredentialUuid = ref(null)
+const hoveredSession = ref(null)
+
+// 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 handleDelete(credential) {
+async function handleDelete(credential) {
-  fetch(`/auth/admin/orgs/${props.selectedUser.org_uuid}/users/${props.selectedUser.uuid}/credentials/${credential.credential_uuid}`, { method: 'DELETE' })
+  try {
-    .then(res => res.json())
+    const data = await apiJson(`/auth/api/admin/users/${props.selectedUser.uuid}/credentials/${credential.credential}`, { method: 'DELETE' })
-    .then(data => {
     if (data.status === 'ok') {
       emit('onUserNameSaved') // Reuse to refresh user detail
     } else {
       console.error('Failed to delete credential', data)
     }
-    })
+  } catch (err) {
-    .catch(err => console.error('Delete credential error', err))
+    console.error('Delete credential error', err)
+  }
 }
 
+async function handleTerminateSession(session) {
+  const sessionKey = session?.key
+  if (!sessionKey) return
+  terminatingSessions.value = { ...terminatingSessions.value, [sessionKey]: true }
+  try {
+    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
+      authStore.showMessage('Session terminated', 'success', 2500)
+    } else {
+      authStore.showMessage(data.detail || 'Failed to terminate session', 'error')
+    }
+  } catch (err) {
+    console.error('Terminate session error', err)
+    authStore.showMessage(err.message || 'Failed to terminate session', 'error')
+  } finally {
+    const next = { ...terminatingSessions.value }
+    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: '.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: '.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: '.mini-btn' })
+}
+
+defineExpose({ focusFirstElement })
 </script>
 
 <template>
   <div class="user-detail">
+    <div ref="userInfoRef" @keydown="handleUserInfoKeydown">
       <UserBasicInfo
         v-if="userDetail && !userDetail.error"
-      :name="userDetail.display_name || selectedUser.display_name"
+        :name="userDetail.user.display_name || selectedUser.display_name"
-      :visits="userDetail.visits"
+        :visits="userDetail.user.visits"
-      :created-at="userDetail.created_at"
+        :created-at="userDetail.user.created_at"
-      :last-seen="userDetail.last_seen"
+        :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"
+        :role-name="userDetail.role.display_name"
-      :update-endpoint="`/auth/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/display-name`"
+        :update-endpoint="`/auth/api/admin/users/${selectedUser.uuid}/info`"
         @saved="$emit('onUserNameSaved')"
-      @edit-name="handleEditName"
+        @edit="handleEditName"
-    />
+      >
-    <div v-else-if="userDetail?.error" class="error small">{{ userDetail.error }}</div>
+        <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">
-      <h3 class="cred-title">Registered Passkeys</h3>
+      <section class="section-block" data-section="registered-passkeys">
-      <CredentialList :credentials="userDetail.credentials" :aaguid-info="userDetail.aaguid_info" :allow-delete="true" @delete="handleDelete" />
+        <div class="section-header">
+          <h2>Registered Passkeys</h2>
+        </div>
+        <div class="section-body">
+          <CredentialList
+            ref="credentialListRef"
+            :credentials="credentials"
+            :aaguid-info="userDetail.aaguid_info"
+            :allow-delete="true"
+            :hovered-credential-uuid="hoveredCredentialUuid"
+            :hovered-session-credential-uuid="hoveredSession?.credential"
+            :navigation-disabled="hasActiveModal"
+            @delete="handleDelete"
+            @credential-hover="hoveredCredentialUuid = $event"
+            @navigate-out="handleCredentialNavigateOut"
+          />
+        </div>
+      </section>
+      <SessionList
+        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">
+    <div class="actions ancillary-actions" ref="backButtonRef" @keydown="handleBackButtonKeydown">
-      <button @click="$emit('generateUserRegistrationLink', selectedUser)">Generate Registration Token</button>
       <button v-if="selectedOrg" @click="$emit('openOrg', selectedOrg)" class="icon-btn" title="Back to Org">↩️</button>
     </div>
-    <p class="matrix-hint muted">Use the token dialog to register a new credential for the member.</p>
     <RegistrationLinkModal
       v-if="showRegModal"
-      :endpoint="`/auth/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/create-link`"
+      :endpoint="`/auth/api/admin/users/${selectedUser.uuid}/create-link`"
-      :auto-copy="false"
+      :user-name="userDetail?.display_name || selectedUser.display_name"
       @close="$emit('closeRegModal')"
       @copied="onLinkCopied"
     />
@@ -77,13 +263,6 @@ function handleDelete(credential) {
 
 <style scoped>
 .user-detail { display: flex; flex-direction: column; gap: var(--space-lg); }
-.cred-title { font-size: 1.25rem; font-weight: 600; color: var(--color-heading); margin-bottom: var(--space-md); }
+.admin-actions { display: flex; gap: 0.5rem; }
-.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
+.ancillary-actions { margin-top: -0.5rem; }
-.actions button { width: auto; }
-.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/style.css

@@ -1,71 +1,90 @@
-/* Passkey Authentication – Unified Layout */
+
+@property --hue {
+  syntax: '<angle>';
+  inherits: true;
+  initial-value: 0.72turn;
+}
 
 :root {
-  color-scheme: light dark;
   --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-canvas: white;
-  --color-surface: #ffffff;
+  --color-surface: white;
-  --color-surface-subtle: #f1f3f7;
+  --color-surface-subtle: white;
-  --color-border: #d0d5dd;
+  --color-surface-hover: oklab(0.97 -0.01 -0.02);
-  --color-border-strong: #9aa2af;
+  --color-dialog: oklab(0.96 -0.01 -0.03);
-  --color-heading: #101828;
+  --color-border: oklab(0.82 -0.02 -0.06);
-  --color-text: #1f2933;
+  --color-border-strong: oklab(0.55 -0.05 -0.14);
-  --color-text-muted: #52616b;
+  --color-heading: oklab(0.22 -0.03 -0.09);
-  --color-link: #2563eb;
+  --color-text: oklab(0.2 -0.02 -0.05);
-  --color-link-hover: #1d4ed8;
+  --color-text-muted: oklab(0.42 -0.02 -0.06);
-  --color-accent: #2563eb;
+  --color-link: oklab(0.5 -0.06 -0.17);
-  --color-accent-strong: #1e3faa;
+  --color-link-hover: oklab(0.45 -0.06 -0.19);
-  --color-accent-contrast: #ffffff;
+  --color-accent: oklab(0.55 -0.06 -0.19);
-  --color-success-text: #0f5132;
+  --color-accent-strong: oklab(0.45 -0.06 -0.19);
-  --color-success-bg: #d1fadf;
+  --color-accent-contrast: white;
-  --color-error-text: #b42318;
+  --color-secondary: oklab(0.55 -0.02 -0.05);
-  --color-error-bg: #ffe3e3;
+  --color-secondary-strong: oklab(0.45 -0.02 -0.05);
-  --color-info-text: #0f609b;
+  --color-success-text: oklab(0.4 -0.12 0.09);
-  --color-info-bg: #d6ecff;
+  --color-success-bg: oklab(0.95 -0.02 0.02);
-  --color-danger: #dc2626;
+  --color-error-text: oklab(0.45 0.18 0.09);
-  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
+  --color-error-bg: oklab(0.95 0.03 0.01);
-  --radius-none: 0;
+  --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;
+  --space-3xl: 5rem;
-  --layout-max-width: 1080px;
   --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.dark {
-  :root {
+  --color-canvas: oklab(0.17 -0.02 -0.05);
-    color-scheme: dark;
+  --color-surface: oklab(0.22 -0.02 -0.05);
-    --color-canvas: #0f172a;
+  --color-surface-subtle: oklab(0.25 -0.02 -0.05);
-    --color-surface: #141b2f;
+  --color-surface-hover: oklab(0.28 -0.02 -0.05);
-    --color-surface-subtle: #1b243b;
+  --color-dialog: oklab(0.22 -0.02 -0.05);
-    --color-border: #25304a;
+  --color-border: oklab(0.3 -0.02 -0.05);
-    --color-border-strong: #3d4d6b;
+  --color-border-strong: oklab(0.4 -0.02 -0.05);
-    --color-heading: #f8fafc;
+  --color-heading: white;
-    --color-text: #e2e8f0;
+  --color-text: oklab(0.9 0.00 -0.01);
-    --color-text-muted: #94a3b8;
+  --color-text-muted: oklab(0.7 -0.01 -0.02);
-    --color-link: #60a5fa;
+  --color-link: oklab(0.7 -0.05 -0.14);
-    --color-link-hover: #93c5fd;
+  --color-link-hover: oklab(0.8 -0.04 -0.11);
-    --color-accent: #60a5fa;
+  --color-accent: oklab(0.7 -0.05 -0.14);
-    --color-accent-strong: #3b82f6;
+  --color-accent-strong: oklab(0.6 -0.06 -0.17);
-    --color-accent-contrast: #0b1120;
+  --color-accent-contrast: oklab(0.12 -0.01 -0.03);
-    --color-success-text: #34d399;
+  --color-secondary: oklab(0.6 -0.02 -0.05);
-    --color-success-bg: rgba(34, 197, 94, 0.12);
+  --color-secondary-strong: oklab(0.5 -0.02 -0.05);
-    --color-error-text: #fca5a5;
+  --color-success-text: oklab(0.75 -0.12 0.09);
-    --color-error-bg: rgba(248, 113, 113, 0.16);
+  --color-success-bg: oklab(0.3 -0.07 0.05);
-    --color-info-text: #bae6fd;
+  --color-error-text: oklab(0.8 0.11 0.05);
-    --color-info-bg: rgba(59, 130, 246, 0.16);
+  --color-error-bg: oklab(0.3 0.07 0.03);
-    --color-danger: #f87171;
+  --color-info-text: oklab(0.8 -0.03 -0.10);
-    --shadow-soft: 0 0 0 rgba(0, 0, 0, 0);
+  --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);
 }
 
 *,
@@ -74,18 +93,26 @@
   box-sizing: border-box;
 }
 
-html,
+html {
-body {
+  overflow: clip;
   height: 100%;
+  background: var(--color-canvas);
 }
 
 body {
+  overflow: auto;
+  scrollbar-gutter: stable;
+  height: 100%;
   margin: 0;
   font-family: var(--font-sans);
-  background: var(--color-canvas);
+  background: none;
   color: var(--color-text);
   line-height: 1.55;
   -webkit-font-smoothing: antialiased;
+  text-align: justify;
+  hyphens: auto;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
 }
 
 body,
@@ -110,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 {
@@ -124,7 +144,6 @@ a:focus-visible {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background: var(--color-canvas);
 }
 
 .app-main {
@@ -134,26 +153,44 @@ a:focus-visible {
 }
 
 .view-root {
+  position: relative;
   flex: 1;
   width: 100%;
   display: flex;
-  padding: var(--layout-padding);
-  box-sizing: border-box;
-}
-
-.view-content {
-  flex: 1;
-  display: flex;
   flex-direction: column;
   gap: 2rem;
+  padding: var(--layout-padding);
+  box-sizing: border-box;
   margin: 0 auto;
-  width: min(100%, var(--layout-max-width));
 }
 
-.view-content--wide {
+.view-root--wide {
   width: min(100%, 1200px);
 }
 
+.view-root--narrow {
+  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;
@@ -191,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 {
@@ -218,61 +265,67 @@ 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);
-}
+  transition: box-shadow var(--transition-base), background var(--transition-base), border-color var(--transition-base);
-
-button:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
 }
 
 button:disabled {
-  opacity: 0.6;
   cursor: not-allowed;
+  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;
+  background: linear-gradient(to bottom, oklab(1 0 0 / 0.15), transparent 60%) var(--color-secondary);
-  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);
   color: var(--color-accent-contrast);
   border-color: transparent;
 }
 
-.btn-danger:hover:not(:disabled) {
+.btn-secondary:hover:not(:disabled),
-  filter: brightness(0.92);
+.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;
@@ -285,12 +338,16 @@ select {
   transition: border-color var(--transition-base), box-shadow var(--transition-base);
 }
 
-input:focus-visible,
+input:not([type]):focus,
-textarea:focus-visible,
+input[type="text"]:focus,
-select:focus-visible {
+input[type="search"]:focus,
-  border-color: var(--color-accent);
+input[type="email"]:focus,
-  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+input[type="tel"]:focus,
+textarea:focus,
+select:focus {
   outline: none;
+  border-color: var(--color-accent);
+  box-shadow: var(--focus-ring);
 }
 
 label {
@@ -333,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;
@@ -352,13 +517,20 @@ th {
 .global-status {
   position: fixed;
   top: 1.5rem;
-  left: 50%;
+  left: 0;
-  transform: translateX(-50%);
+  right: 0;
-  z-index: 1200;
+  margin: 0 auto;
-  min-width: min(520px, calc(100vw - 2rem));
+  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;
@@ -373,28 +545,30 @@ th {
 }
 
 .status.info {
-  border-color: rgba(14, 96, 155, 0.28);
+  border-color: #3b82f6;
   color: var(--color-info-text);
   background: var(--color-info-bg);
 }
 
 .status.success {
-  border-color: rgba(6, 118, 71, 0.22);
+  border-color: #16a34a;
   color: var(--color-success-text);
   background: var(--color-success-bg);
 }
 
 .status.error {
-  border-color: rgba(180, 35, 24, 0.28);
+  border-color: #dc2626;
   color: var(--color-error-text);
   background: var(--color-error-bg);
 }
 
 .dialog-overlay {
   position: fixed;
-  inset: 0;
+  top: 0;
-  background: rgba(9, 14, 24, 0.55);
+  bottom: 0;
-  backdrop-filter: blur(6px);
+  left: 0;
+  right: 0;
+  background: transparent;
   z-index: 1100;
   display: flex;
   align-items: center;
@@ -404,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%);
@@ -425,9 +599,8 @@ th {
 }
 
 .qr-code {
-  border: 1px solid var(--color-border);
+  padding: 1rem;
-  padding: 0.75rem;
+  background: white;
-  background: var(--color-surface);
 }
 
 .link-container,
@@ -440,121 +613,224 @@ th {
   color: var(--color-text);
 }
 
-.credential-list {
+:root { --card-width: 16rem; }
+
+.record-list,
+.credential-list,
+.session-list {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  grid-auto-flow: row;
-  gap: 1rem 1.25rem;
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
+  justify-content: start;
+  gap: 0.5rem;
   align-items: stretch;
+  margin: 0 auto;
+  outline: none;
 }
 
-.credential-item {
+@media (max-width: 720px) {
+  .record-list { display: flex; flex-direction: column; max-width: 100%; }
+}
+
+.record-item,
+.credential-item,
+.session-item {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  padding: 0.5rem;
-  padding: 0.85rem 1rem;
+  border-radius: var(--radius-md);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
   background: var(--color-surface);
   height: 100%;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  position: relative;
+  cursor: pointer;
 }
 
-.credential-item.current-session {
+.record-item:hover,
+.credential-item:hover,
+.session-item:hover {
+  border-color: var(--color-border-strong);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
+  transform: translateY(-1px);
+}
+
+.record-item.is-current,
+.credential-item.current-session,
+.session-item.is-current {
   border-color: var(--color-accent);
-  background: rgba(37, 99, 235, 0.08);
+  background-color: var(--color-surface-subtle);
 }
 
-.credential-header {
+.credential-item.is-hovered,
+.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;
-  gap: 1rem;
+  align-items: center;
-  align-items: flex-start;
+  height: 2.5rem;
-  flex-wrap: wrap;
-  flex: 1 1 auto;
 }
 
-.credential-icon {
+.item-icon {
   width: 40px;
   height: 40px;
   display: grid;
   place-items: center;
+  flex-shrink: 0;
 }
 
-.credential-info {
+.auth-icon {
-  flex: 1 1 auto;
+  border-radius: var(--radius-sm);
 }
 
-.credential-info h4 {
+.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;
 }
 
-.credential-dates {
+.item-actions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.item-actions .badge + .btn-card-delete { margin-left: 0.25rem; }
+.item-actions .badge + .badge { margin-left: 0.25rem; }
+
+.item-details {
+  margin-left: 40px;
+}
+
+.credential-dates,
+.session-dates {
   display: grid;
   grid-auto-flow: row;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: 8em 1fr;
-  gap: 0.35rem 0.5rem;
   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;
 }
 
-.credential-actions {
+.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; }
-  margin-left: auto;
+.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;
 }
 
-.btn-delete-credential {
+.badge {
-  background: transparent;
+  padding: 0.2rem 0.5rem;
-  border: none;
+  border-radius: var(--radius-sm);
-  color: var(--color-danger);
+  font-size: 0.8rem;
-  padding: 0.25rem 0.35rem;
+  font-weight: 500;
-  font-size: 1.05rem;
+  white-space: nowrap;
 }
 
-.btn-delete-credential:hover:not(:disabled) {
+.badge-current {
-  background: rgba(220, 38, 38, 0.08);
+  background: var(--color-accent);
+  color: var(--color-accent-contrast);
+  box-shadow: 0 0 0 1px var(--color-accent) inset;
 }
 
-.btn-delete-credential:disabled {
+.badge:not(.badge-current) {
-  opacity: 0.35;
+  background: var(--color-surface-subtle);
-  cursor: not-allowed;
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+}
+
+
+.session-meta-info {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  font-family: monospace;
+}
+
+.empty-state {
+  text-align: center;
+  padding: var(--space-lg);
+  color: var(--color-text-muted);
+}
+
+.empty-state p {
+  margin: 0;
 }
 
 .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 {
+.user-details {
-  margin: 0;
+  display: grid;
-  grid-column: span 2;
+  grid-template-columns: 7em 1fr;
-  display: flex;
+  gap: 0 0.5rem;
-  align-items: center;
+  padding-left: 40px;
-  gap: 0.5rem;
+  font-size: 0.75rem;
-  font-size: 1.15rem;
-  font-weight: 600;
-}
-
-.user-info span {
-  text-align: left;
-  color: var(--color-text);
 }
 
 .toggle-link {
@@ -573,39 +849,27 @@ th {
 @media (max-width: 720px) {
   .view-root {
     padding: clamp(1rem, 3vw + 0.75rem, 2rem);
-  }
-
-  .view-content {
     gap: 1.75rem;
   }
 
-  .credential-dates {
-    grid-auto-flow: row;
-    grid-template-columns: auto auto;
-  }
-
-  button {
-    width: 100%;
-  }
-
-  .button-row {
-    flex-direction: column;
-  }
-
   .global-status {
     top: 1rem;
   }
 }
 
-/* Dialog styles for auth views */
+/* Mobile portrait (touch) or very narrow screens */
+@media (max-width: 500px) and (orientation: portrait) and (pointer: coarse), (max-width: 350px) {
+}
+
 .dialog-backdrop {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
-  background: rgba(0, 0, 0, 0.5);
+  background: transparent;
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(.2rem) brightness(0.7);
+  -webkit-backdrop-filter: blur(.2rem) brightness(0.7);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -623,9 +887,9 @@ 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 rgba(0, 0, 0, 0.3);
+  box-shadow: 0 20px 60px #1e293b;
   border: 1px solid var(--color-border);
 }
 
@@ -642,3 +906,52 @@ th {
     padding: 1.5rem;
   }
 }
+
+.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;
+}
+
+.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

@@ -0,0 +1,58 @@
+<template>
+  <div class="message-container">
+    <div class="message-content">
+      <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="reload">Reload Page</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { goBack } from '@/utils/helpers'
+
+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>
+.message-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  padding: 2rem;
+}
+
+.message-content {
+  text-align: center;
+  max-width: 480px;
+}
+
+.message-content h2 {
+  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;
+  justify-content: center;
+}
+</style>

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(() => {
+  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,15 +1,25 @@
 <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 }]"
+        :class="['credential-item', {
+          'current-session': credential.is_current_session && !hoveredCredentialUuid && !hoveredSessionCredentialUuid,
+          'is-hovered': hoveredCredentialUuid === credential.credential,
+          'is-linked-session': hoveredSessionCredentialUuid === credential.credential
+        }]"
+        tabindex="-1"
+        @mousedown.prevent
+        @click.capture="handleCardClick"
+        @focusin="handleCredentialFocus(credential.credential)"
+        @focusout="handleCredentialBlur($event)"
+        @keydown="handleItemKeydown($event, credential)"
       >
-        <div class="credential-header">
+        <div class="item-top">
-          <div class="credential-icon">
+          <div class="item-icon">
             <img
               v-if="getCredentialAuthIcon(credential)"
               :src="getCredentialAuthIcon(credential)"
@@ -20,22 +30,29 @@
             >
             <span v-else class="auth-emoji">🔑</span>
           </div>
-          <div class="credential-info">
+          <h4 class="item-title">{{ getCredentialAuthName(credential) }}</h4>
-            <h4>{{ 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" 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 and terminate any linked sessions.'"
+              tabindex="-1"
+            >❌</button>
           </div>
+        </div>
+        <div class="item-details">
           <div class="credential-dates">
             <span class="date-label">Created:</span>
             <span class="date-value">{{ formatDate(credential.created_at) }}</span>
-            <span class="date-label" v-if="credential.last_used">Last used:</span>
+            <span class="date-label">Last used:</span>
-            <span class="date-value" v-if="credential.last_used">{{ formatDate(credential.last_used) }}</span>
+            <span class="date-value">{{ formatDate(credential.last_used) }}</span>
-          </div>
+            <span class="date-label">Last verified:</span>
-          <div class="credential-actions" v-if="allowDelete">
+            <span class="date-value">{{ formatDate(credential.last_verified) }}</span>
-            <button
-              @click="$emit('delete', credential)"
-              class="btn-delete-credential"
-              :disabled="credential.is_current_session"
-              :title="credential.is_current_session ? 'Cannot delete current session credential' : 'Delete passkey'"
-            >🗑️</button>
           </div>
         </div>
       </div>
@@ -44,16 +61,84 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
 import { formatDate } from '@/utils/helpers'
+import { navigateGrid, handleEscape, handleDeleteKey, getDirection } from '@/utils/keynav'
 
 const props = defineProps({
   credentials: { type: Array, default: () => [] },
   aaguidInfo: { type: Object, default: () => ({}) },
   loading: { type: Boolean, default: false },
   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', 'navigate-out'])
+
+const handleCredentialFocus = (uuid) => {
+  emit('credentialHover', uuid)
+}
+
+const handleCredentialBlur = (event) => {
+  // Only clear if focus moved outside this element
+  if (!event.currentTarget.contains(event.relatedTarget)) {
+    emit('credentialHover', null)
+  }
+}
+
+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'
@@ -63,125 +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'
+  // Fall back to icon if icon_dark is not available
-  return info[iconKey] || null
+  return (isDarkMode && info.icon_dark) || info.icon || null
 }
 </script>
 
-<style scoped>
+<style>
-.credential-list {
+.btn-card-delete {
-  width: 100%;
+  display: none;
-  margin-top: var(--space-sm);
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 1rem 1.25rem;
-  align-items: stretch;
 }
-
+.credential-item:focus .btn-card-delete {
-.credential-item {
+  display: block;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  padding: 0.85rem 1rem;
-  background: var(--color-surface);
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  width: 28rem;
-  height: 100%;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
-}
-
-.credential-item:hover {
-  border-color: var(--color-border-strong);
-  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
-  transform: translateY(-1px);
-}
-
-.credential-item.current-session {
-  border-color: var(--color-accent);
-  background: rgba(37, 99, 235, 0.08);
-}
-
-.credential-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-  flex-wrap: wrap;
-  flex: 1 1 auto;
-}
-
-.credential-icon {
-  width: 40px;
-  height: 40px;
-  display: grid;
-  place-items: center;
-  background: var(--color-surface-subtle, transparent);
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-border);
-}
-
-.auth-icon {
-  border-radius: var(--radius-sm);
-}
-
-.credential-info {
-  flex: 1 1 150px;
-  min-width: 0;
-}
-
-.credential-info h4 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-heading);
-}
-
-.credential-dates {
-  display: grid;
-  grid-auto-flow: row;
-  grid-template-columns: auto 1fr;
-  gap: 0.35rem 0.5rem;
-  font-size: 0.75rem;
-  align-items: center;
-  color: var(--color-text-muted);
-}
-
-.date-label {
-  font-weight: 600;
-}
-
-.date-value {
-  color: var(--color-text);
-}
-
-.credential-actions {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-}
-
-.btn-delete-credential {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 1rem;
-  color: var(--color-danger);
-  padding: 0.25rem 0.35rem;
-  border-radius: var(--radius-sm);
-}
-
-.btn-delete-credential:hover:not(:disabled) {
-  background: rgba(220, 38, 38, 0.08);
-}
-
-.btn-delete-credential:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-
-@media (max-width: 600px) {
-  .credential-list {
-    grid-template-columns: 1fr;
-  }
 }
 </style>

frontend/src/components/DeviceLinkView.vue

@@ -1,108 +0,0 @@
-<template>
-  <section class="view-root view-device-link">
-    <div class="view-content view-content--narrow">
-      <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>
-      <section class="section-block">
-        <div class="section-body">
-          <div class="device-link-section">
-            <div class="qr-container">
-              <a :href="url" class="qr-link" @click="copyLink">
-                <canvas ref="qrCanvas" class="qr-code"></canvas>
-                <p v-if="url">
-                  {{ url.replace(/^[^:]+:\/\//, '') }}
-                </p>
-                <p v-else>
-                  <em>Generating link...</em>
-                </p>
-              </a>
-              <p>
-                <strong>Scan and visit the URL on another device.</strong><br>
-                <small>⚠️ Expires in 24 hours and can only be used once.</small>
-              </p>
-            </div>
-          </div>
-          <div class="button-row">
-            <button @click="authStore.currentView = 'profile'" class="btn-secondary">
-              Back to Profile
-            </button>
-          </div>
-        </div>
-      </section>
-    </div>
-  </section>
-</template>
-
-<script setup>
-import { ref, onMounted, nextTick } from 'vue'
-import { useAuthStore } from '@/stores/auth'
-import QRCode from 'qrcode/lib/browser'
-
-const authStore = useAuthStore()
-const url = ref(null)
-const qrCanvas = ref(null)
-
-const copyLink = async (event) => {
-  event.preventDefault()
-  if (url.value) {
-    await navigator.clipboard.writeText(url.value)
-    authStore.showMessage('Link copied to clipboard!')
-    authStore.currentView = 'profile'
-  }
-}
-
-async function drawQr() {
-  if (!url.value || !qrCanvas.value) return
-  await nextTick()
-  QRCode.toCanvas(qrCanvas.value, url.value, { scale: 8 }, (error) => {
-    if (error) console.error('Failed to generate QR code:', error)
-  })
-}
-
-onMounted(async () => {
-  try {
-    const response = await fetch('/auth/api/create-link', { method: 'POST' })
-    const result = await response.json()
-    if (result.detail) throw new Error(result.detail)
-
-    url.value = result.url
-    await drawQr()
-  } catch (error) {
-    authStore.showMessage(`Failed to create device link: ${error.message}`, 'error')
-    authStore.currentView = 'profile'
-  }
-})
-
-</script>
-
-<style scoped>
-.view-content--narrow {
-  max-width: 540px;
-}
-
-.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

@@ -0,0 +1,129 @@
+<template>
+  <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" ref="userInfoSection">
+      <div class="section-body">
+        <UserBasicInfo
+          v-if="ctx"
+          :name="ctx.user.display_name"
+          :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"
+        />
+        <p v-else class="empty-state">
+          {{ initializing ? 'Loading your account…' : 'No active session found.' }}
+        </p>
+      </div>
+    </section>
+
+    <section class="section-block">
+      <div class="section-body host-actions">
+        <div class="button-row" ref="buttonRow" @keydown="handleButtonRowKeydown">
+          <button
+            type="button"
+            class="btn-secondary"
+            @click="goBack"
+          >
+            Back
+          </button>
+          <button
+            type="button"
+            class="btn-danger"
+            :disabled="authStore.isLoading"
+            @click="logout"
+          >
+            {{ authStore.isLoading ? 'Signing out…' : 'Logout' }}
+          </button>
+          <button
+            v-if="authSiteUrl"
+            type="button"
+            class="btn-primary"
+            :disabled="authStore.isLoading"
+            @click="goToAuthSite"
+          >
+            Full Profile
+          </button>
+        </div>
+        <p class="note"><strong>Logout</strong> from {{ currentHost }}, or access your <strong>Full Profile</strong> at {{ authSiteHost }} (you may need to sign in again).</p>
+      </div>
+    </section>
+  </section>
+</template>
+
+<script setup>
+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: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const authStore = useAuthStore()
+const currentHost = window.location.host
+
+// 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
+  return service ? `${service} account` : 'Account overview'
+})
+
+const subheading = computed(() => {
+  return `You're signed in to ${currentHost}.`
+})
+
+const authSiteHost = computed(() => authStore.settings?.auth_host || '')
+const authSiteUrl = computed(() => {
+  const host = authSiteHost.value
+  if (!host) return ''
+  let path = authStore.settings?.ui_base_path ?? '/auth/'
+  if (!path.startsWith('/')) path = `/${path}`
+  if (!path.endsWith('/')) path = `${path}/`
+  const protocol = window.location.protocol || 'https:'
+  return `${protocol}//${host}${path}`
+})
+
+const goToAuthSite = () => {
+  if (!authSiteUrl.value) return
+  window.location.href = authSiteUrl.value
+}
+
+const logout = async () => {
+  await authStore.logout()
+}
+
+// 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)
+}
+</script>

frontend/src/components/LoadingView.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="loading-container">
+    <div class="loading-spinner"></div>
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    default: 'Loading...'
+  }
+})
+</script>
+
+<style scoped>
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  gap: 1rem;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-container p {
+  color: var(--color-text-muted);
+  margin: 0;
+}
+</style>

frontend/src/components/LoginView.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="dialog-backdrop">
-    <div class="dialog-container">
-      <div class="dialog-content dialog-content--narrow">
-        <header class="view-header">
-          <h1>🔐 {{ (authStore.settings?.rp_name || location.origin)}}</h1>
-          <p class="view-lede">User authentication is required for access.</p>
-        </header>
-        <section class="section-block">
-          <form class="section-body" @submit.prevent="handleLogin">
-            <button
-              type="submit"
-              class="btn-primary"
-              :disabled="authStore.isLoading"
-            >
-              {{ authStore.isLoading ? 'Authenticating...' : 'Login with Your Device' }}
-            </button>
-          </form>
-        </section>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useAuthStore } from '@/stores/auth'
-
-const authStore = useAuthStore()
-
-const handleLogin = async () => {
-  try {
-    authStore.showMessage('Starting authentication...', 'info')
-    await authStore.authenticate()
-    authStore.showMessage('Authentication successful!', 'success', 2000)
-    authStore.currentView = 'profile'
-  } catch (error) {
-    authStore.showMessage(error.message, 'error')
-  }
-}
-</script>
-
-<style scoped>
-.view-lede {
-  margin: 0;
-  color: var(--color-text-muted);
-}
-
-.section-body {
-  gap: 1.5rem;
-}
-
-@media (max-width: 720px) {
-  button {
-    width: 100%;
-  }
-}
-</style>

frontend/src/components/Modal.vue

@@ -1,32 +1,156 @@
 <template>
-  <div class="modal-overlay" @keydown.esc="$emit('close')" tabindex="-1">
+  <div class="dialog-overlay" @click="$emit('close')">
-    <div class="modal" role="dialog" aria-modal="true">
+    <div ref="dialog" class="modal-panel" @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: '' }
+})
+
+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 {
+.modal-panel {
-  position: fixed;
+  background: var(--color-dialog);
-  top: 0;
+  color: var(--color-text);
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(.1rem);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal {
-  background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-xl);
@@ -37,53 +161,34 @@ defineEmits(['close'])
   overflow-y: auto;
 }
 
-.modal :deep(.modal-title),
+.modal-panel :deep(.modal-title),
-.modal :deep(h3) {
+.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-panel :deep(.modal-actions) {
-.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 rgba(37, 99, 235, 0.1);
-}
-
-.modal :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(() => {
+const handleActionsKeydown = (event) => {
-  if (!props.autoFocus) return
+  const direction = getDirection(event)
-  nextTick(() => {
+  if (direction === 'up') {
-    if (props.autoSelect) {
+    event.preventDefault()
-      inputRef.value?.select()
-    } else {
     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/ProfileView.vue

@@ -1,71 +1,142 @@
 <template>
-  <section class="view-root" data-view="profile">
+  <section class="view-root view-root--profile" data-view="profile">
-    <div class="view-content">
+    <div class="view-header-wrapper">
+      <div class="theme-toggle">
+        <ThemeSelector />
+      </div>
       <header class="view-header">
-        <h1>👋 Welcome!</h1>
+        <Breadcrumbs ref="breadcrumbs" :entries="breadcrumbEntries" @keydown="handleBreadcrumbKeydown" />
-  <Breadcrumbs :entries="breadcrumbEntries" />
+        <p class="view-lede">Account dashboard to manage your profile and authentications.</p>
-        <p class="view-lede">Manage your account details and passkeys.</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"
+        ref="userBasicInfo"
-          :visits="authStore.userInfo.user.visits || 0"
+        :name="authStore.userInfo.user.display_name"
+        :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"
+        @edit="openEditDialog"
+        @keydown="handleUserInfoKeydown"
+      >
+        <div class="remote-auth-inline">
+          <label v-if="!showDeviceInfo" class="remote-auth-label">Code words:</label>
+          <RemoteAuthPermit
+            ref="pairingEntry"
+            title=""
+            description=""
+            @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 || []"
+          ref="credentialList"
-            :aaguid-info="authStore.userInfo?.aaguid_info || {}"
+          :credentials="credentials"
+          :aaguid-info="authStore.userInfo.aaguid_info"
           :loading="authStore.isLoading"
+          :hovered-credential-uuid="hoveredCredentialUuid"
+          :hovered-session-credential-uuid="hoveredSession?.credential"
+          :navigation-disabled="hasActiveModal"
           allow-delete
           @delete="handleDelete"
+          @credential-hover="hoveredCredentialUuid = $event"
+          @navigate-out="handleCredentialNavigateOut"
         />
-          <div class="button-row">
+        <div class="button-row" ref="credentialButtons">
-            <button @click="addNewCredential" class="btn-primary">
+          <button @click="addNewCredential" class="btn-primary" @keydown="handleCredentialButtonKeydown">Register New</button>
-              Add New Passkey
+          <button @click="showRegLink = true" class="btn-secondary" @keydown="handleCredentialButtonKeydown">Another Device</button>
-            </button>
-            <button @click="authStore.currentView = 'device-link'" class="btn-secondary">
-              Add Another Device
-            </button>
         </div>
       </div>
     </section>
 
-      <section class="section-block">
+    <SessionList
-        <div class="button-row">
+      ref="sessionList"
-          <button @click="logout" class="btn-danger logout-button">
+      :sessions="sessions"
-            Logout
+      :terminating-sessions="terminatingSessions"
+      :hovered-credential-uuid="hoveredCredentialUuid"
+      :navigation-disabled="hasActiveModal"
+      :section-class="useWideLayout ? '' : 'section-block--constrained'"
+      @terminate="terminateSession"
+      @session-hover="hoveredSession = $event"
+      @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."
+    />
+
+    <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" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">Logout</button>
+        <template v-else>
+          <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>
+      <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>
 
-      <!-- Name Edit Dialog -->
+    <Modal v-if="showEditDialog" @close="showEditDialog = false">
-      <Modal v-if="showNameDialog" @close="showNameDialog = false">
+      <h3>Edit Profile</h3>
-        <h3>Edit Display Name</h3>
+      <form @submit.prevent="saveProfile" class="modal-form">
-        <form @submit.prevent="saveName" class="modal-form">
+        <div class="profile-edit-form">
-          <NameEditForm
+          <label for="edit-display-name">Display Name
-            label="Display Name"
+            <input id="edit-display-name" type="text" v-model="editName" :disabled="saving" required />
-            v-model="newName"
+          </label>
-            :busy="saving"
+          <label for="edit-email">Email
-            @cancel="showNameDialog = false"
+            <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>
-    </div>
+
+    <RegistrationLinkModal
+      v-if="showRegLink"
+      endpoint="/auth/api/user/create-link"
+      @close="showRegLink = false"
+      @copied="onLinkCopied"
+    />
   </section>
 </template>
 
@@ -73,135 +144,288 @@
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import CredentialList from '@/components/CredentialList.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 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 '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 newName = ref('')
+const showRegLink = ref(false)
+const editName = ref('')
+const editEmail = ref('')
+const editUsername = ref('')
+const editTelephone = ref('')
 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 userBasicInfo = ref(null)
+const userInfoSection = ref(null)
 
-watch(showNameDialog, (newVal) => {
+// Check if any modal/dialog is open (blocks arrow key navigation)
-  if (newVal) {
+const hasActiveModal = computed(() => showEditDialog.value || showRegLink.value)
-    newName.value = authStore.userInfo?.user?.user_name || ''
+
-  }
+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(() => {
+  updateInterval.value = setInterval(() => { if (authStore.userInfo) authStore.userInfo = { ...authStore.userInfo } }, 60000)
-    // Trigger Vue reactivity to update formatDate fields
-    if (authStore.userInfo) {
-      authStore.userInfo = { ...authStore.userInfo }
-    }
-  }, 60000) // Update every minute
 })
 
-onUnmounted(() => {
+onUnmounted(() => { if (updateInterval.value) clearInterval(updateInterval.value) })
-  if (updateInterval.value) {
-    clearInterval(updateInterval.value)
-  }
-})
 
 const addNewCredential = async () => {
   try {
-    authStore.isLoading = true
+    await passkey.register(null, null, () => {
       authStore.showMessage('Adding new passkey...', 'info')
-    await passkey.register()
+    })
     await authStore.loadUserInfo()
     authStore.showMessage('New passkey added successfully!', 'success', 3000)
   } catch (error) {
     console.error('Failed to add new passkey:', error)
     authStore.showMessage(error.message, 'error')
-  } finally {
-    authStore.isLoading = false
   }
 }
 
+const handlePairingCompleted = () => {
+  authStore.showMessage('The other device is now signed in!', 'success', 4000)
+  // Reset the form after a delay
+  setTimeout(() => pairingEntry.value?.reset(), 3000)
+}
+
+const handlePairingError = (message) => {
+  // Error is already shown in the component, optionally show global message for severe errors
+  if (!message.includes('cancelled')) {
+    authStore.showMessage(message, 'error', 4000)
+  }
+}
+
+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: '.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 = '.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: '.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) {
+  } catch (error) { authStore.showMessage(`Failed to delete passkey: ${error.message}`, 'error') }
-    authStore.showMessage(`Failed to delete passkey: ${error.message}`, 'error')
-  }
 }
 
-const logout = async () => {
+const rpName = computed(() => authStore.settings?.rp_name || 'this service')
-  await authStore.logout()
+const paskiaVersion = computed(() => authStore.settings?.version || '')
-}
+const sessions = computed(() => authStore.userInfo.sessions)
-
+const currentSessionHost = computed(() => {
-const openNameDialog = () => {
+  const currentSession = Object.values(sessions.value).find(session => session.is_current)
-  newName.value = authStore.userInfo?.user?.user_name || ''
+  return currentSession?.host || 'this host'
-  showNameDialog.value = true
-}
-
-const isAdmin = computed(() => !!(authStore.userInfo?.is_global_admin || authStore.userInfo?.is_org_admin))
-
-const breadcrumbEntries = computed(() => {
-  const entries = [{ label: 'Auth', href: authStore.uiHref() }]
-  if (isAdmin.value) entries.push({ label: 'Admin', href: authStore.adminHomeHref() })
-  return entries
 })
+const terminatingSessions = ref({})
 
-const saveName = async () => {
+const terminateSession = async (session) => {
-  const name = newName.value.trim()
+  const sessionKey = session?.key
-  if (!name) {
+  if (!sessionKey) return
-    authStore.showMessage('Name cannot be empty', 'error')
+  terminatingSessions.value = { ...terminatingSessions.value, [sessionKey]: true }
-    return
+  try { await authStore.terminateSession(sessionKey) }
+  catch (error) { authStore.showMessage(error.message || 'Failed to terminate session', 'error', 5000) }
+  finally {
+    const next = { ...terminatingSessions.value }
+    delete next[sessionKey]
+    terminatingSessions.value = next
   }
+}
+
+const logoutEverywhere = async () => { await authStore.logoutEverywhere() }
+const logout = async () => { await authStore.logout() }
+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)
+
+  // 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
-    const res = await fetch('/auth/api/user/display-name', {
+    const body = {}
-      method: 'PUT',
+    if (name !== user.display_name) body.display_name = name
-      headers: { 'content-type': 'application/json' },
+    if (emailVal !== (user.email || null)) body.email = emailVal
-      body: JSON.stringify({ display_name: name })
+    if (usernameVal !== (user.preferred_username || null)) body.preferred_username = usernameVal
-    })
+    if (telephoneVal !== (user.telephone || null)) body.telephone = telephoneVal
-    const data = await res.json()
+    if (Object.keys(body).length) {
-    if (!res.ok || data.detail) throw new Error(data.detail || 'Update failed')
+      await apiJson('/auth/api/user/info', { method: 'PATCH', body })
-  showNameDialog.value = false
       await authStore.loadUserInfo()
-    authStore.showMessage('Name updated successfully!', 'success', 3000)
+      authStore.showMessage('Profile updated!', 'success', 3000)
-  } catch (e) {
-    authStore.showMessage(e.message || 'Failed to update name', 'error')
-  } finally {
-    saving.value = false
     }
+    showEditDialog.value = false
+  } catch (e) {
+    editError.value = e.message || 'Failed to update profile'
+  } finally { saving.value = false }
 }
 </script>
 
 <style scoped>
-.view-lede {
+.section-header { display: flex; flex-direction: column; gap: 0.4rem; }
-  margin: 0;
+.empty-state { margin: 0; color: var(--color-text-muted); text-align: center; padding: 1rem 0; }
-  color: var(--color-text-muted);
+.logout-note { margin: 0; color: var(--color-text-muted); }
-  font-size: 1rem;
+.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); }
-.section-header {
+.remote-auth-inline { display: flex; flex-direction: column; gap: 0.5rem; }
-  display: flex;
+.remote-auth-label { display: block; margin: 0; font-size: 0.875rem; color: var(--color-text-muted); font-weight: 500; }
-  flex-direction: column;
+.remote-auth-description { font-size: 0.75rem; color: var(--color-text-muted); }
-  gap: 0.4rem;
+.theme-toggle { position: absolute; top: var(--layout-padding); right: var(--layout-padding); }
-}
+.profile-edit-form { display: flex; flex-direction: column; gap: var(--space-md); }
-
-.section-description {
-  margin: 0;
-  color: var(--color-text-muted);
-}
-
-.logout-button {
-  align-self: flex-start;
-}
-
-@media (max-width: 720px) {
-  .logout-button {
-    width: 100%;
-  }
-}
 </style>
-

frontend/src/components/QRCodeDisplay.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="qr-display">
+    <div class="qr-section">
+      <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>
+</template>
+
+<script setup>
+import { ref, watch, nextTick, computed } from 'vue'
+import QRCode from 'qrcode/lib/browser'
+
+const props = defineProps({
+  url: { type: String, required: true },
+  showLink: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['copied'])
+
+const qrCanvas = ref(null)
+
+const displayUrl = computed(() => {
+  if (!props.url) return ''
+  return props.url.replace(/^https?:\/\//, '')
+})
+
+function drawQR() {
+  if (!props.url || !qrCanvas.value) {
+    return
+  }
+
+  try {
+    // Clear the canvas first
+    const ctx = qrCanvas.value.getContext('2d')
+    ctx.clearRect(0, 0, qrCanvas.value.width, qrCanvas.value.height)
+
+    // Generate QR code synchronously
+    QRCode.toCanvas(qrCanvas.value, props.url, {
+      scale: 6,
+      margin: 0,
+      color: {
+        dark: '#000000',
+        light: '#FFFFFF'
+      }
+    })
+
+    // Remove any inline styles added by QRCode library immediately
+    qrCanvas.value.removeAttribute('style')
+  } catch (err) {
+    console.error('QR code generation failed:', err)
+  }
+}
+
+async function copyLink() {
+  if (!props.url) return
+  try {
+    await navigator.clipboard.writeText(props.url)
+    emit('copied')
+  } catch (err) {
+    console.error('Failed to copy link:', err)
+  }
+}
+
+// Watch for URL changes
+watch(() => props.url, () => {
+  drawQR()
+}, { immediate: true })
+
+// Watch for canvas ref becoming available
+watch(qrCanvas, () => {
+  if (qrCanvas.value && props.url) {
+    drawQR()
+  }
+}, { immediate: true })
+</script>
+
+<style scoped>
+.qr-display {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.qr-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.qr-link {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+  border-radius: var(--radius-sm, 6px);
+  overflow: hidden;
+}
+
+.qr-code {
+  display: block;
+  width: 200px;
+  height: 200px;
+  max-width: 100%;
+  object-fit: contain;
+  border-radius: var(--radius-sm, 6px);
+  background: #ffffff;
+  cursor: pointer;
+}
+
+.link-text {
+  padding: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  font-family: monospace;
+  word-break: break-all;
+  line-height: 1.2;
+  transition: color 0.2s ease;
+}
+
+.qr-link:hover .link-text {
+  color: var(--color-text);
+}
+</style>

frontend/src/components/RegistrationLinkModal.vue

@@ -1,87 +1,174 @@
 <template>
-  <div class="dialog-overlay" @keydown.esc.prevent="$emit('close')">
+  <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 style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
+      <div class="reg-header-row">
-        <h2 id="regTitle" style="margin:0; font-size:1.25rem;">📱 Device Registration Link</h2>
+        <h2 id="regTitle" class="reg-title">
-        <button class="icon-btn" @click="$emit('close')" aria-label="Close">❌</button>
+          📱 <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" tabindex="-1">✕</button>
       </div>
+
       <div class="device-link-section">
-        <div class="qr-container">
+        <p class="reg-help">
-          <a v-if="url" :href="url" @click.prevent="copy" class="qr-link">
+          {{ helpText }}
-            <canvas ref="qrCanvas" class="qr-code"></canvas>
+        </p>
-            <p>{{ displayUrl }}</p>
+
-          </a>
+        <QRCodeDisplay
-          <div v-else>
+          :url="linkUrl"
-            <em>Generating link...</em>
+          :show-link="true"
-          </div>
+          @copied="onCopied"
-          <p>
+          @keydown="handleQRKeydown"
-            <strong>Scan and visit the URL on another device.</strong><br>
+        />
-            <small>⚠️ Expires in 24 hours and one-time use.</small>
+
+        <p class="expiry-note" v-if="expiresAt">
+          This link expires {{ formatDate(expiresAt).toLowerCase() }}.
         </p>
-          <div v-if="expires" style="font-size:12px; margin-top:6px;">Expires: {{ new Date(expires).toLocaleString() }}</div>
       </div>
-      </div>
+
-      <div style="display:flex; justify-content:flex-end; gap:.5rem; margin-top:10px;">
+      <div class="reg-actions" ref="actionsRow" @keydown="handleActionsKeydown">
         <button class="btn-secondary" @click="$emit('close')">Close</button>
-        <button class="btn-primary" :disabled="!url" @click="copy">Copy Link</button>
+      </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch, computed, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
-import QRCode from 'qrcode/lib/browser'
+import QRCodeDisplay from '@/components/QRCodeDisplay.vue'
+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 }, // POST endpoint returning {url, expires}
+  endpoint: { type: String, required: true },
-  autoCopy: { type: Boolean, default: true }
+  userName: { type: String, default: '' }
 })
 
-const emit = defineEmits(['close','generated','copied'])
+const emit = defineEmits(['close', 'copied'])
 
-const url = ref(null)
+const authStore = useAuthStore()
-const expires = ref(null)
+const dialog = ref(null)
-const qrCanvas = 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)
 
-const displayUrl = computed(() => url.value ? url.value.replace(/^[^:]+:\/\//,'') : '')
+// Determine if this is an admin action for another user
+const isAdminAction = computed(() => !!props.userName)
 
-async function fetchLink() {
+// 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() {
   try {
-    const res = await fetch(props.endpoint, { method: 'POST' })
+    const data = await apiJson(props.endpoint, { method: 'POST' })
-    const data = await res.json()
+    if (data.url) {
-    if (data.detail) throw new Error(data.detail)
+      linkUrl.value = data.url
-    url.value = data.url
+      expiresAt.value = data.expires ? new Date(data.expires) : null
-    expires.value = data.expires
+      tokenType.value = data.token_type || null
-    emit('generated', { url: data.url, expires: data.expires })
+
+      holdGlobalBackdrop()
+
+      // Focus primary button (or first button if no primary) after content renders
       await nextTick()
-    drawQR()
+      const actions = actionsRow.value
-    if (props.autoCopy) copy()
+      const target = actions?.querySelector('.btn-primary') || actions?.querySelector('button')
+      target?.focus()
+    } else {
+      emit('close')
+    }
   } catch (e) {
-    url.value = null
+    if (!(e instanceof AuthCancelledError)) {
-    expires.value = null
+      authStore.showMessage(e.message || 'Failed to generate link', 'error')
-    console.error('Failed to create link', e)
+    }
+    emit('close')
   }
 }
 
-async function drawQR() {
+function onCopied() {
-  if (!url.value) return
+  emit('copied')
-  await nextTick()
-  if (!qrCanvas.value) return
-  QRCode.toCanvas(qrCanvas.value, url.value, { scale: 8 }, err => { if (err) console.error(err) })
 }
 
-async function copy() {
+const handleDialogKeydown = (event) => {
-  if (!url.value) return
+  // ESC to close
-  try { await navigator.clipboard.writeText(url.value); emit('copied', url.value); emit('close') } catch (_) { /* ignore */ }
+  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
+  }
 }
 
-onMounted(fetchLink)
+const handleQRKeydown = (event) => {
-watch(url, () => drawQR(), { flush: 'post' })
+  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>
-.icon-btn { background:none; border:none; cursor:pointer; font-size:1rem; opacity:.6; }
+.icon-btn { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: .6; }
-.icon-btn:hover { opacity:1; }
+.icon-btn:hover { opacity: 1; }
-/* Minimal extra styling; main look comes from global styles */
+.reg-header-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
-.qr-link { text-decoration:none; color:inherit; }
+.reg-title { margin: 0; font-size: 1.25rem; font-weight: 600; }
+.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; }
+.expiry-note { font-size: .75rem; color: var(--color-text-muted); text-align: center; margin-top: .75rem; }
 </style>

frontend/src/components/RemoteAuthPermit.vue

@@ -0,0 +1,955 @@
+<template>
+  <div class="pairing-entry">
+    <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, '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>
+                </template>
+                <template v-else-if="word.text">
+                  {{ word.text }}
+                  <span v-if="word.hasCursor" class="cursor-overlay" :style="{ '--cursor-pos': word.cursorCharIndex, '--word-len': word.wordLen }"></span>
+                </template>
+                <template v-else>
+                  <span v-if="word.hasCursor" class="cursor-overlay" :style="{ '--cursor-pos': 0, '--word-len': 0 }"></span>
+                </template>
+              </div>
+            </div>
+          </div>
+          <!-- Hidden input for actual text entry -->
+          <input
+            ref="inputRef"
+            v-model="code"
+            type="text"
+            :placeholder="placeholder"
+            autocomplete="off"
+            autocapitalize="none"
+            autocorrect="off"
+            spellcheck="false"
+            class="pairing-input hidden-input"
+            @input="handleInput"
+            @keydown="deferUpdateCursor"
+            @mouseup="updateCursorPos"
+            @focus="isFocused = true"
+            @blur="isFocused = false"
+          />
+        </div>
+        <!-- Processing status beside input -->
+        <div v-if="processingStatus" class="processing-status">
+          <span class="processing-icon">{{ processingStatus === 'pow' ? '🔐' : '📡' }}</span>
+          <span class="processing-spinner-small"></span>
+        </div>
+      </div>
+
+      <!-- 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 v-if="error" class="error-message">{{ error }}</p>
+
+        <div class="button-row device-actions">
+          <button
+            type="button"
+            class="btn-secondary"
+            :disabled="loading"
+            @click="deny"
+          >
+            Deny
+          </button>
+          <button
+            ref="submitBtnRef"
+            type="submit"
+            :disabled="loading"
+            class="btn-primary"
+          >
+            {{ loading ? 'Authenticating…' : 'Authorize' }}
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { startAuthentication } from '@simplewebauthn/browser'
+import aWebSocket from '@/utils/awaitable-websocket'
+import { b64dec, b64enc } from '@/utils/base64url'
+import { getSettings } from '@/utils/settings'
+import { getUniqueMatch, isValidWord, isValidPrefix } from '@/utils/wordlist'
+import { solvePoW } from '@/utils/pow'
+import { useAuthStore } from '@/stores/auth'
+
+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'
+})
+
+const emit = defineEmits(['completed', 'error', 'cancelled', 'back', 'register', 'deviceInfoVisible'])
+
+// State
+const loading = ref(false)
+const error = ref(null)
+const settings = ref(null)
+let ws = null
+let authStore = null
+
+// Try to get authStore (might fail if Pinia not installed in this app instance)
+try { authStore = useAuthStore() } catch (e) { /* ignore */ }
+
+const inputRef = ref(null)
+const submitBtnRef = ref(null)
+const code = ref('')
+const isProcessing = ref(false)
+const processingStatus = ref('')
+const deviceInfo = ref(null)
+const autocompleteHint = ref('')
+
+// Watch deviceInfo and emit visibility change
+watch(deviceInfo, (newVal) => {
+  emit('deviceInfoVisible', !!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
+let powPromise = null
+let powSolution = null
+let lookupTimeout = null
+let lastLookedUpCode = null
+
+// --- Helpers ---
+
+function showMessage(message, type = 'info', duration = 3000) {
+  if (authStore) {
+    authStore.showMessage(message, type, duration)
+  }
+}
+
+async function fetchSettings() {
+  try {
+    const data = await getSettings()
+    settings.value = data
+  } catch (err) {
+    console.warn('Unable to load settings', err)
+  }
+}
+
+// --- Input Mode Logic ---
+
+function getWordAtCursor(input, cursor) {
+  if (!input || cursor < 0) return { word: '', start: 0, end: 0 }
+  let start = cursor, end = cursor
+  while (start > 0 && /[a-zA-Z]/.test(input[start - 1])) start--
+  while (end < input.length && /[a-zA-Z]/.test(input[end])) end++
+  return { word: input.slice(start, end), start, end }
+}
+
+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 = getDisplayWords(input)
+  return endsWithSeparator ? words.length : Math.max(0, words.length - 1)
+}
+
+function analyzeWords(input) {
+  if (!input) return { valid: true, segments: [] }
+  const segments = []
+  const endsWithSeparator = /[.\s]$/.test(input)
+  let match, regex = /([a-zA-Z]+)|([.\s]+)/g
+  while ((match = regex.exec(input)) !== null) {
+    if (match[1]) segments.push({ text: match[1], isWord: true, start: match.index })
+    else if (match[2]) segments.push({ text: match[2], isWord: false, start: match.index })
+  }
+  const words = segments.filter(s => s.isWord)
+  let allValid = true
+  words.forEach((wordSeg, idx) => {
+    const isLastWord = idx === words.length - 1
+    const word = wordSeg.text.toLowerCase()
+    if (isLastWord && !endsWithSeparator) wordSeg.invalid = !isValidPrefix(word)
+    else wordSeg.invalid = !isValidWord(word)
+    if (wordSeg.invalid) allValid = false
+  })
+  return { valid: allValid, segments }
+}
+
+const coloredSegments = computed(() => {
+  const { segments } = analyzeWords(code.value)
+  return segments.map(s => ({ text: s.text, invalid: s.invalid || false }))
+})
+
+function checkWordsValidity(input) { return analyzeWords(input).valid }
+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) {
+  const endsWithSeparator = /[.\s]$/.test(input)
+  if (endsWithSeparator) return ''
+  const match = input.match(/[a-zA-Z]+$/)
+  return match ? match[0].toLowerCase() : ''
+}
+
+// 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 }
+  }
+
+  const beforeCursor = input.slice(0, rawCursorPos)
+  const endsWithSeparator = /[.\s]$/.test(beforeCursor)
+
+  // Get display words for the text before cursor
+  const displayWordsBefore = getDisplayWords(beforeCursor)
+
+  if (displayWordsBefore.length === 0) {
+    return { wordIndex: 0, 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/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 = getDisplayWords(code.value)
+  const result = []
+
+  // 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
+  // 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 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
+        // Total visible length is the full hint word
+        const totalLen = hint.length
+        result.push({
+          text: '',
+          typedPrefix: partialWord,
+          hintSuffix: hint.slice(partialWord.length),
+          invalid: isInvalid,
+          hasCursor: isCursorSlot,
+          cursorCharIndex: isCursorSlot ? cursor.charIndex : -1,
+          wordLen: totalLen,
+          selectionStartChar,
+          selectionEndChar
+        })
+      } else {
+        // Complete word - show cursor at appropriate position
+        result.push({
+          text: word,
+          invalid: isInvalid,
+          hasCursor: isCursorSlot,
+          cursorCharIndex: isCursorSlot ? cursor.charIndex : -1,
+          wordLen: word.length,
+          selectionStartChar,
+          selectionEndChar
+        })
+      }
+    } else {
+      // Empty slot
+      result.push({
+        text: '',
+        invalid: false,
+        hasCursor: isCursorSlot,
+        cursorCharIndex: 0,
+        wordLen: 0,
+        selectionStartChar,
+        selectionEndChar
+      })
+    }
+  }
+
+  return result
+})
+
+const hasSelection = computed(() => selectionStart.value !== selectionEnd.value)
+
+const hasThreeValidWords = computed(() => {
+  const words = getDisplayWords(code.value)
+  return words.length === 3 && words.every(w => isValidWord(w))
+})
+
+function normalizeCode(input) {
+  // Use display words to handle concatenated words like "alienfood" -> "alien.food"
+  const words = getDisplayWords(input)
+  return words.join('.')
+}
+
+function startPowSolving() {
+  if (!currentChallenge || powPromise) return
+  const challenge = b64dec(currentChallenge)
+  powPromise = solvePoW(challenge, currentWork).then(solution => {
+    powSolution = solution
+    powPromise = null
+  })
+}
+
+async function getPowSolution() {
+  if (powSolution) { const s = powSolution; powSolution = null; return s }
+  if (powPromise) { await powPromise; const s = powSolution; powSolution = null; return s }
+  if (!currentChallenge) throw new Error('No PoW challenge available')
+  const challenge = b64dec(currentChallenge)
+  return await solvePoW(challenge, currentWork)
+}
+
+function updateChallenge(pow) {
+  if (pow?.challenge) {
+    currentChallenge = pow.challenge
+    currentWork = pow.work
+    powSolution = null
+    powPromise = null
+    startPowSolving()
+  }
+}
+
+async function ensureConnection() {
+  if (ws || wsConnecting) return
+  wsConnecting = true
+  try {
+    const authHost = settings.value?.auth_host
+    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()
+    if (msg.status && msg.detail) throw new Error(msg.detail)
+    if (!msg.pow?.challenge) throw new Error('Server did not send PoW challenge')
+    updateChallenge(msg.pow)
+  } catch (err) {
+    console.error('WebSocket connection error:', err)
+    ws = null
+    throw err
+  } finally {
+    wsConnecting = false
+  }
+}
+
+// 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 === ' ' || event.key === 'Escape') {
+    handleKeydown(event)
+    return
+  }
+  // Defer cursor update to next tick
+  setTimeout(updateCursorPos, 0)
+}
+
+function updateCursorPos() {
+  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() {
+  cursorPos.value = inputRef.value?.selectionStart ?? code.value.length
+  const { word, end } = getWordAtCursor(code.value, cursorPos.value)
+  const completeWordCount = countCompleteWords(code.value)
+  if (completeWordCount >= 3 || !word || word.length < 1 || cursorPos.value !== end) {
+    autocompleteHint.value = ''
+    return
+  }
+  const match = getUniqueMatch(word.toLowerCase())
+  if (match && match !== word.toLowerCase()) autocompleteHint.value = match
+  else autocompleteHint.value = ''
+}
+
+function applyAutocomplete() {
+  if (!autocompleteHint.value) return false
+  const { word, start, end } = getWordAtCursor(code.value, cursorPos.value)
+  if (!word) return false
+  const before = code.value.slice(0, start)
+  const wordsBefore = getDisplayWords(before).length
+  const isThirdWord = wordsBefore === 2
+  const suffix = isThirdWord ? '' : ' '
+  const after = code.value.slice(end)
+  code.value = before + autocompleteHint.value + suffix + after.trimStart()
+  const newPos = start + autocompleteHint.value.length + suffix.length
+  nextTick(() => {
+    inputRef.value?.setSelectionRange(newPos, newPos)
+    cursorPos.value = newPos
+  })
+  autocompleteHint.value = ''
+  return true
+}
+
+function handleInput() {
+  cursorPos.value = inputRef.value?.selectionStart ?? code.value.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
+      })
+    }
+  }
+
+  updateAutocomplete()
+  if (lookupTimeout) { clearTimeout(lookupTimeout); lookupTimeout = null }
+  deviceInfo.value = null
+  error.value = null
+  serverError.value = false
+  hasInvalidWord.value = !checkWordsValidity(code.value)
+  const currentWords = getDisplayWords(code.value)
+  if (currentWords.length >= 1 && !ws && !wsConnecting) ensureConnection()
+  if (currentWords.length === 3) {
+    if (!allWordsValid(code.value)) return
+    lookupTimeout = setTimeout(() => { lookupDeviceInfo() }, 150)
+  }
+}
+
+async function lookupDeviceInfo() {
+  if (isProcessing.value || loading.value) return
+  if (!hasThreeValidWords.value) return
+  const normalizedCode = normalizeCode(code.value)
+  if (normalizedCode === lastLookedUpCode && deviceInfo.value) return
+
+  isProcessing.value = true
+  processingStatus.value = 'pow'
+  error.value = null
+  serverError.value = false
+
+  try {
+    await ensureConnection()
+    if (!ws) throw new Error('Failed to connect')
+    const solution = await getPowSolution()
+    const powB64 = b64enc(solution)
+    const currentCode = normalizeCode(code.value)
+    if (!hasThreeValidWords.value) return
+    processingStatus.value = 'server'
+    ws.send_json({ code: currentCode, pow: powB64 })
+    const res = await ws.receive_json()
+    updateChallenge(res.pow)
+    if (typeof res.status === 'number' && res.status >= 400) {
+      showMessage(res.detail || 'Request failed', 'error')
+      serverError.value = true
+      deviceInfo.value = null
+      lastLookedUpCode = null
+      return
+    }
+    if (res.status === 'found' && res.host) {
+      deviceInfo.value = {
+        host: res.host,
+        user_agent_pretty: res.user_agent_pretty,
+        client_ip: res.client_ip,
+        action: res.action || 'login'
+      }
+      lastLookedUpCode = currentCode
+      nextTick(() => { submitBtnRef.value?.focus() })
+    } else {
+      showMessage('Unexpected response from server', 'error')
+      serverError.value = true
+      deviceInfo.value = null
+      lastLookedUpCode = null
+    }
+  } catch (err) {
+    console.error('Lookup error:', err)
+    showMessage(err.message || 'Lookup failed', 'error')
+    serverError.value = true
+    deviceInfo.value = null
+    lastLookedUpCode = null
+    if (ws) { ws.close(); ws = null }
+  } finally {
+    isProcessing.value = false
+    processingStatus.value = ''
+  }
+}
+
+function handleKeydown(event) {
+  if (event.key === 'Escape') {
+    code.value = ''
+    handleInput()
+    event.preventDefault()
+    return
+  }
+  if (event.key === 'Tab') {
+    if (autocompleteHint.value) {
+      const applied = applyAutocomplete()
+      if (applied) { event.preventDefault(); handleInput(); return }
+    }
+    if (code.value.trim()) event.preventDefault()
+    return
+  }
+  if (event.key === ' ' && autocompleteHint.value) {
+    const applied = applyAutocomplete()
+    if (applied) { event.preventDefault(); handleInput() }
+  }
+}
+
+async function submitCode() {
+  if (!deviceInfo.value || loading.value) return
+  loading.value = true
+  error.value = null
+  try {
+    if (!ws) await ensureConnection()
+    if (!ws) throw new Error('Failed to connect')
+    const solution = await getPowSolution()
+    const powB64 = b64enc(solution)
+    ws.send_json({ authenticate: true, pow: powB64 })
+    const res = await ws.receive_json()
+    if (typeof res.status === 'number' && res.status >= 400) throw new Error(res.detail || 'Authentication failed')
+    if (!res.optionsJSON) throw new Error(res.detail || 'Failed to get authentication options')
+    const authResponse = await startAuthentication(res)
+    ws.send_json(authResponse)
+    const result = await ws.receive_json()
+    if (typeof result.status === 'number' && result.status >= 400) throw new Error(result.detail || 'Authentication failed')
+    if (result.status === 'success') {
+      showMessage('Device authenticated successfully!', 'success', 3000)
+      emit('completed')
+      reset()
+    } else {
+      throw new Error(result.detail || 'Authentication failed')
+    }
+  } catch (err) {
+    console.error('Pairing error:', err)
+    const message = err.name === 'NotAllowedError'
+      ? 'Passkey authentication was cancelled'
+      : (err.message || 'Authentication failed')
+    error.value = message
+    // Don't show toast - error is shown in dialog
+    emit('error', message)
+  } finally {
+    loading.value = false
+    if (ws) { ws.close(); ws = null }
+  }
+}
+
+async function deny() {
+  // Send deny message to server before closing websocket
+  if (ws) {
+    try {
+      ws.send_json({ deny: true })
+      // Give the server a moment to process the denial
+      await new Promise(resolve => setTimeout(resolve, 100))
+    } catch (e) {
+      console.error('Error sending deny message:', e)
+    }
+    ws.close()
+    ws = null
+  }
+
+  // Reset to initial state
+  reset()
+}
+
+function reset() {
+  code.value = ''
+  error.value = null
+  serverError.value = false
+  deviceInfo.value = null
+  isProcessing.value = false
+  processingStatus.value = ''
+  autocompleteHint.value = ''
+  hasInvalidWord.value = false
+  lastLookedUpCode = null
+  if (ws) { ws.close(); ws = null }
+  currentChallenge = null
+  currentWork = null
+  powPromise = null
+  powSolution = null
+}
+
+// --- Lifecycle ---
+
+onMounted(async () => {
+  await fetchSettings()
+  // Initialize cursor position
+  nextTick(() => {
+    cursorPos.value = inputRef.value?.selectionStart ?? 0
+  })
+})
+
+onUnmounted(() => {
+  if (lookupTimeout) { clearTimeout(lookupTimeout); lookupTimeout = null }
+  if (ws) { ws.close(); ws = null }
+})
+
+defineExpose({ reset, deny, code, handleInput, loading, error })
+</script>
+
+<style scoped>
+/* Input Mode Styles */
+.pairing-entry {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.pairing-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  max-width: 100%;
+}
+
+/* Slot machine visual display (matches RemoteAuthRequest) */
+.slot-machine {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  gap: 0;
+  box-sizing: border-box;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.input-wrapper.focused.has-error .slot-machine {
+  background: var(--color-error-bg, rgba(239, 68, 68, 0.05));
+}
+
+.slot-reel {
+  flex: 1 1 33.333%;
+  overflow: visible;
+}
+
+.slot-reel:not(:last-child) {
+  margin-right: 0.5rem;
+}
+
+.slot-word {
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-align: center;
+  width: 100%;
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.slot-word .typed-prefix {
+  color: var(--color-text);
+}
+
+.slot-word .hint-suffix {
+  color: var(--color-text-muted);
+  opacity: 0.6;
+}
+
+.cursor-overlay {
+  position: absolute;
+  width: 2px;
+  height: 1.2em;
+  background: var(--color-text);
+  animation: none;
+  pointer-events: none;
+  /* Position based on character index - calculate from center of slot */
+  left: calc(50% + (var(--cursor-pos) - var(--word-len, 0) / 2) * 0.65em);
+  transform: translateX(-1px);
+  opacity: 0;
+}
+
+.input-wrapper.focused .cursor-overlay {
+  opacity: 1;
+  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%, 50% { opacity: 1; }
+  80%, 100% { opacity: 0; }
+}
+
+.slot-reel.invalid-word .slot-word {
+  color: var(--color-error, #ef4444);
+}
+
+.slot-reel.invalid-word .slot-word .typed-prefix {
+  color: var(--color-error, #ef4444);
+}
+
+.slot-reel.invalid-word .cursor-overlay {
+  background: var(--color-error, #ef4444);
+}
+
+.slot-reel.empty .slot-word {
+  color: var(--color-text-muted);
+}
+
+/* Hidden input - keeps focus and handles keyboard input */
+.pairing-input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius-sm, 6px);
+  position: relative;
+  z-index: 0;
+}
+
+.pairing-input.hidden-input {
+  opacity: 0;
+}
+
+.pairing-input:disabled {
+  cursor: not-allowed;
+}
+
+.pairing-input::placeholder {
+  color: transparent;
+}
+
+.processing-status {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+.processing-icon {
+  font-size: 0.875rem;
+}
+
+.processing-spinner-small {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.device-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.device-permit-text {
+  margin: 0;
+  font-size: 0.95rem;
+  color: var(--color-text);
+}
+
+.device-meta {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+}
+
+.error-message {
+  margin: 0.5rem 0 0;
+  font-size: 0.875rem;
+  color: var(--color-error, #ef4444);
+}
+
+.device-actions {
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.device-actions button {
+  flex: 1;
+}
+</style>

frontend/src/components/RemoteAuthRequest.vue

@@ -0,0 +1,530 @@
+<template>
+  <div class="remote-auth-inline">
+    <!-- Success state -->
+    <div v-if="completed" class="success-section">
+      <p class="success-message">✅ {{ successMessage }}</p>
+    </div>
+
+    <!-- Error state -->
+    <div v-else-if="error" class="error-section">
+      <p class="error-message">{{ error }}</p>
+      <button class="btn-primary" @click="retry">Try Again</button>
+    </div>
+
+    <!-- Connecting phase -->
+    <div v-else-if="phase === 'connecting'" class="auth-display">
+      <div class="auth-content">
+        <div class="pairing-code-section">
+          <p class="pairing-label">Enter the code words:</p>
+          <div class="slot-machine" aria-hidden="true">
+            <div class="slot-reel" v-for="(word, index) in animatedWords" :key="index">
+              <div class="slot-word">{{ word }}</div>
+            </div>
+          </div>
+          <p class="site-url">{{ siteUrlDisplay }}</p>
+        </div>
+      </div>
+
+      <div class="waiting-indicator">
+        <div class="spinner-small"></div>
+        <span>Generating code…</span>
+      </div>
+    </div>
+
+    <!-- Waiting/Authenticating phase - show codes -->
+    <div v-else class="auth-display">
+      <div class="auth-content">
+        <div v-if="pairingCode" class="pairing-code-section">
+          <p class="pairing-label">Enter the code words:</p>
+          <div class="slot-machine stopped">
+            <div class="slot-reel" v-for="(word, index) in displayCode.split(' ')" :key="index">
+              <div class="slot-word">{{ word }}</div>
+            </div>
+          </div>
+          <p class="site-url">{{ siteUrlDisplay }}</p>
+        </div>
+      </div>
+
+      <div class="waiting-indicator">
+        <div class="spinner-small"></div>
+        <span>{{ waitingMessage }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import aWebSocket from '@/utils/awaitable-websocket'
+import { b64dec, b64enc } from '@/utils/base64url'
+import { getSettings } from '@/utils/settings'
+import { solvePoW } from '@/utils/pow'
+import { words } from '@/utils/wordlist'
+
+const props = defineProps({
+  active: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['authenticated', 'cancelled', 'error', 'register'])
+
+const pairingCode = ref(null)
+const completed = ref(false)
+const error = ref(null)
+const phase = ref('connecting')
+const settings = ref(null)
+const animatedWords = ref(['', '', ''])
+let ws = null
+let wordAnimationTimer = null
+
+const displayCode = computed(() => pairingCode.value ? pairingCode.value.replace(/\./g, ' ') : '')
+
+const siteUrlDisplay = computed(() => {
+  if (!settings.value) return ''
+  const authSiteUrl = settings.value.auth_site_url || `${location.protocol}//${location.host}/auth/`
+  // Remove the protocol and any trailing slash
+  const withoutProtocol = authSiteUrl.replace(/^https?:\/\//, '')
+  return withoutProtocol.endsWith('/') ? withoutProtocol.slice(0, -1) : withoutProtocol
+})
+
+const waitingMessage = computed(() => {
+  return phase.value === 'authenticating'
+    ? 'Complete on another device…'
+    : 'Waiting for authentication…'
+})
+
+const successMessage = computed(() => 'Authenticated successfully!')
+
+function getRandomWord() {
+  return words[Math.floor(Math.random() * words.length)]
+}
+
+function startWordAnimation() {
+  // Initialize with random words
+  animatedWords.value = [getRandomWord(), getRandomWord(), getRandomWord()]
+
+  let updateCount = 0
+  const maxUpdates = 20 // Number of cycles before stopping
+
+  // Different intervals for each slot to spin independently
+  const intervals = [
+    setInterval(() => {
+      const newWords = [...animatedWords.value]
+      newWords[0] = getRandomWord()
+      animatedWords.value = newWords
+    }, 140),
+    setInterval(() => {
+      const newWords = [...animatedWords.value]
+      newWords[1] = getRandomWord()
+      animatedWords.value = newWords
+    }, 170),
+    setInterval(() => {
+      const newWords = [...animatedWords.value]
+      newWords[2] = getRandomWord()
+      animatedWords.value = newWords
+    }, 200)
+  ]
+
+  wordAnimationTimer = intervals
+
+  // Stop all after max updates
+  setTimeout(() => {
+    intervals.forEach(interval => clearInterval(interval))
+    wordAnimationTimer = null
+  }, maxUpdates * 170) // Average interval time
+}
+
+function stopWordAnimation() {
+  if (wordAnimationTimer) {
+    if (Array.isArray(wordAnimationTimer)) {
+      wordAnimationTimer.forEach(interval => clearInterval(interval))
+    } else {
+      clearInterval(wordAnimationTimer)
+    }
+    wordAnimationTimer = null
+  }
+}
+
+async function startRemoteAuth() {
+  error.value = null
+  completed.value = false
+  pairingCode.value = null
+  phase.value = 'connecting'
+
+  // Start word animation
+  startWordAnimation()
+
+  try {
+    settings.value = await getSettings()
+    const authHost = settings.value?.auth_host
+    const wsPath = '/auth/ws/remote-auth/request'
+    const wsUrl = authHost && location.host !== authHost ? `//${authHost}${wsPath}` : wsPath
+
+    ws = await aWebSocket(wsUrl)
+
+    // 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)
+      ws.send_json({ pow: b64enc(nonces), action: 'login' })
+    }
+
+    // Receive the pairing code
+    const res = await ws.receive_json()
+
+    if (res.status) {
+      throw new Error(res.detail || `Failed to create remote auth request: ${res.status}`)
+    }
+
+    pairingCode.value = res.pairing_code
+
+    // Stop word animation
+    stopWordAnimation()
+
+    phase.value = 'waiting'
+
+    // Wait for authentication
+    while (true) {
+      const msg = await ws.receive_json()
+
+      if (msg.status === 'locked') {
+        // Someone has entered the code and is authenticating
+        phase.value = 'authenticating'
+      } else if (msg.status === 'paired') {
+        // Legacy/compatibility: Device paired, now authenticating
+        phase.value = 'authenticating'
+      } else if (msg.status === 'authenticated') {
+        // Success
+        completed.value = true
+        emit('authenticated', { exchange_code: msg.exchange_code })
+        break
+      } else if (msg.status === 'denied') {
+        // Explicitly denied by the authenticating device
+        throw new Error('Access denied')
+      } else if (msg.status === 'completed') {
+        // Registration flow
+        if (msg.reset_token) {
+          completed.value = true
+          emit('register', msg.reset_token)
+        }
+        break
+      } else if (msg.status === 'error' || msg.detail) {
+        throw new Error(msg.detail || 'Remote authentication failed')
+      }
+    }
+  } catch (err) {
+    console.error('Remote authentication error:', err)
+    const message = err.message || 'Authentication failed'
+    error.value = message
+    emit('error', message)
+  } finally {
+    if (ws) {
+      ws.close()
+      ws = null
+    }
+  }
+}
+
+function retry() {
+  startRemoteAuth()
+}
+
+function cancel() {
+  if (ws) {
+    ws.close()
+    ws = null
+  }
+  emit('cancelled')
+}
+
+watch(() => props.active, (newVal) => {
+  if (newVal && !pairingCode.value && !error.value && !completed.value) {
+    startRemoteAuth()
+  }
+})
+
+onMounted(() => {
+  if (props.active) {
+    startRemoteAuth()
+  }
+})
+
+onUnmounted(() => {
+  if (ws) {
+    ws.close()
+    ws = null
+  }
+  stopWordAnimation()
+})
+
+defineExpose({ retry, cancel })
+</script>
+
+<style scoped>
+.remote-auth-inline {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+}
+
+.loading-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 2rem 1rem;
+  min-height: 180px;
+  justify-content: center;
+}
+
+.loading-section p {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: 0.95rem;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.auth-display {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  width: 100%;
+  min-height: 180px;
+}
+
+.auth-content {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+
+.loading-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 1rem;
+}
+
+.loading-placeholder p {
+  margin: 0;
+  color: var(--color-text-muted);
+  font-size: 0.95rem;
+}
+
+.pairing-code-section {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 280px;
+  max-width: 100%;
+}
+
+.pairing-label {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  font-weight: 500;
+  text-align: center;
+}
+
+.slot-machine {
+  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;
+  align-items: center;
+  user-select: none;
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.slot-reel {
+  overflow: hidden;
+  background: var(--color-surface, rgba(255, 255, 255, 0.5));
+}
+
+.slot-machine:not(.stopped) .slot-reel:nth-child(1) {
+  animation: slotSpin 0.14s ease-in-out infinite;
+}
+
+.slot-machine:not(.stopped) .slot-reel:nth-child(2) {
+  animation: slotSpin 0.17s ease-in-out infinite;
+}
+
+.slot-machine:not(.stopped) .slot-reel:nth-child(3) {
+  animation: slotSpin 0.20s ease-in-out infinite;
+}
+
+.slot-word {
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-align: center;
+  width: 100%;
+}
+
+.slot-machine:not(.stopped) .slot-reel:nth-child(1) .slot-word {
+  animation: wordRoll 0.14s ease-in-out infinite;
+}
+
+.slot-machine:not(.stopped) .slot-reel:nth-child(2) .slot-word {
+  animation: wordRoll 0.17s ease-in-out infinite;
+}
+
+.slot-machine:not(.stopped) .slot-reel:nth-child(3) .slot-word {
+  animation: wordRoll 0.20s ease-in-out infinite;
+}
+
+@keyframes slotSpin {
+  0% {
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  50% {
+    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+  100% {
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+}
+
+@keyframes wordRoll {
+  0% {
+    transform: translateY(-30%) scale(0.9);
+    opacity: 0.4;
+    filter: blur(1.5px);
+  }
+  25% {
+    transform: translateY(-10%) scale(0.95);
+    opacity: 0.6;
+    filter: blur(1px);
+  }
+  50% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+    filter: blur(0);
+  }
+  75% {
+    transform: translateY(10%) scale(0.95);
+    opacity: 0.6;
+    filter: blur(1px);
+  }
+  100% {
+    transform: translateY(30%) scale(0.9);
+    opacity: 0.4;
+    filter: blur(1.5px);
+  }
+}
+
+.site-url {
+  margin: 0.5rem 0 0;
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  text-align: center;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  opacity: 0.8;
+}
+
+.waiting-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--color-surface-hover, rgba(0, 0, 0, 0.02));
+  border-radius: var(--radius-sm, 6px);
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+.spinner-small {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.success-section {
+  padding: 1rem;
+  text-align: center;
+  min-height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.success-message {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--color-success, #10b981);
+  font-weight: 500;
+}
+
+.error-section {
+  padding: 1rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  min-height: 180px;
+}
+
+.error-message {
+  margin: 0;
+  font-size: 0.95rem;
+  color: var(--color-error, #ef4444);
+}
+
+.error-section button {
+  margin-top: 0.75rem;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .auth-content {
+    gap: 1.5rem;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .pairing-code-section {
+    width: 100%;
+    max-width: 280px;
+  }
+}
+
+@media (max-width: 480px) {
+  .pairing-code {
+    font-size: 1.1rem;
+    padding: 0.75rem 0.875rem;
+  }
+
+  .pairing-code-section {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+</style>

frontend/src/components/RestrictedAuth.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="app-shell">
+    <div v-if="status.show" class="global-status show">
+      <div :class="['status', status.type]">
+        {{ status.message }}
+      </div>
+    </div>
+
+    <main class="view-root">
+      <div v-if="!initializing" class="surface surface--tight">
+        <header class="view-header center">
+          <h1>{{ headingTitle }}</h1>
+          <p v-if="isAuthenticated" class="user-line">👤 {{ userDisplayName }}</p>
+          <p class="view-lede" v-html="headerMessage"></p>
+        </header>
+
+        <section class="section-block">
+          <div class="section-body center">
+            <!-- Local passkey authentication view -->
+            <div v-if="authView === 'local'" class="auth-view">
+              <div class="button-row button-row--center" ref="buttonRow">
+                <slot name="actions"
+                  :loading="loading"
+                  :can-authenticate="canAuthenticate"
+                  :is-authenticated="isAuthenticated"
+                  :authenticate="authenticateUser"
+                  :logout="logoutUser"
+                  :mode="mode">
+                  <!-- Default actions -->
+                  <button class="btn-secondary" :disabled="loading" @click="$emit('back')">Back</button>
+                  <button v-if="canAuthenticate" class="btn-primary" :disabled="loading" @click="authenticateUser">
+                    {{ loading ? (mode === 'reauth' ? 'Verifying…' : 'Signing in…') : (mode === 'reauth' ? 'Verify' : 'Login') }}
+                  </button>
+                  <button v-if="isAuthenticated && mode !== 'reauth'" class="btn-danger" :disabled="loading" @click="logoutUser">Logout</button>
+                  <button v-if="isAuthenticated && mode !== 'reauth'" class="btn-primary" :disabled="loading" @click="openProfile">Profile</button>
+                </slot>
+              </div>
+            </div>
+
+            <!-- Remote authentication view (request new remote auth) -->
+            <div v-else-if="authView === 'remote'" class="auth-view">
+              <RemoteAuthRequest
+                :active="authView === 'remote'"
+                @authenticated="handleRemoteAuthenticated"
+                @register="handleRemoteRegistration"
+                @cancelled="switchToLocal"
+                @error="handleRemoteAuthError"
+              />
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+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 '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', 'oidc'].includes(value)
+  },
+  oidcQueryString: {
+    type: String,
+    default: null
+  }
+})
+
+const emit = defineEmits(['authenticated', 'forbidden', 'logout', 'back', 'home', 'auth-error'])
+
+const status = reactive({ show: false, message: '', type: 'info' })
+const initializing = ref(true)
+const loading = ref(false)
+const settings = 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(() => !!session.value)
+
+const canAuthenticate = computed(() => {
+  if (initializing.value) return false
+  if (props.mode === 'reauth') return true
+  if (currentView.value === 'forbidden') return false
+  return true
+})
+
+const headingTitle = computed(() => {
+  if (props.mode === 'reauth') {
+    return `🔐 Additional Authentication`
+  }
+  if (currentView.value === 'forbidden') return '🚫 Forbidden'
+  return `🔐 ${settings.value?.rp_name || location.origin}`
+})
+
+const headerMessage = computed(() => {
+  if (props.mode === 'reauth') {
+    return 'Please verify your identity to continue with this action.'
+  }
+  if (currentView.value === 'forbidden') {
+    return 'You lack the required permissions.'
+  }
+  if (authView.value === 'remote') {
+    return 'Confirm from your other device. Or <a href="#" class="inline-link" data-action="local">this device</a>.'
+  }
+  if (canAuthenticate.value && props.mode !== 'reauth') {
+    return 'Please sign in with your passkey. Or use <a href="#" class="inline-link" data-action="remote">another device</a>.'
+  }
+  return 'Please sign in with your passkey.'
+})
+
+const userDisplayName = computed(() => session.value?.ctx.user.display_name || 'User')
+
+function showMessage(message, type = 'info', duration = 3000) {
+  status.show = true
+  status.message = message
+  status.type = type
+  if (statusTimer) clearTimeout(statusTimer)
+  if (duration > 0) statusTimer = setTimeout(() => { status.show = false }, duration)
+}
+
+async function fetchSettings() {
+  try {
+    const data = await getSettings()
+    settings.value = data
+    if (data?.rp_name) {
+      const titleSuffix = props.mode === 'reauth'
+        ? 'Verify Identity'
+        : (isAuthenticated.value ? 'Forbidden' : 'Sign In')
+      document.title = `${data.rp_name} · ${titleSuffix}`
+    }
+  } catch (error) {
+    console.warn('Unable to load settings', error)
+  }
+}
+
+async function validateSession() {
+  try {
+    session.value = await fetchJson('/auth/api/validate', { method: 'POST' })
+    updateThemeFromSession(session.value?.ctx)
+    if (isAuthenticated.value && props.mode !== 'reauth') {
+      currentView.value = 'forbidden'
+      emit('forbidden', session.value)
+    } else {
+      currentView.value = 'login'
+    }
+  } catch (error) {
+    session.value = null
+    currentView.value = 'login'
+    if (error.status !== 401 && error.status !== 403) {
+      showMessage(getUserFriendlyErrorMessage(error), 'error', 4000)
+    }
+  }
+}
+
+async function authenticateUser() {
+  if (!canAuthenticate.value || loading.value) return
+  loading.value = true
+  showMessage('Starting authentication…', 'info')
+  let result
+  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'
+    showMessage(message, cancelled ? 'info' : 'error', 4000)
+    emit('auth-error', { message, cancelled })
+    return
+  }
+  // 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)
+    emit('auth-error', { message, cancelled: false })
+    return
+  }
+  loading.value = false
+  emit('authenticated', result)
+}
+
+async function logoutUser() {
+  if (loading.value) return
+  loading.value = true
+  try {
+    await fetchJson('/auth/api/logout', { method: 'POST' })
+    session.value = null
+    currentView.value = 'login'
+    showMessage('Logged out. You can sign in with a different account.', 'info', 3000)
+  } catch (error) {
+    showMessage(getUserFriendlyErrorMessage(error), 'error', 4000)
+  }
+  finally { loading.value = false }
+  emit('logout')
+}
+
+function openProfile() {
+  const profileWindow = window.open('/auth/', 'passkey_auth_profile')
+  if (profileWindow) profileWindow.focus()
+}
+
+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.exchange_code}` }
+  })
+}
+
+function switchToRemote() {
+  authView.value = 'remote'
+}
+
+function switchToLocal() {
+  authView.value = 'local'
+}
+
+async function handleRemoteAuthenticated(result) {
+  showMessage('Authenticated from another device!', 'success', 2000)
+  try {
+    await exchangeCode(result)
+  } catch (error) {
+    const message = error?.message || 'Failed to establish session'
+    showMessage(message, 'error', 4000)
+    emit('auth-error', { message, cancelled: false })
+    return
+  }
+  emit('authenticated', result)
+}
+
+function handleRemoteRegistration(token) {
+  showMessage('Registration approved! Redirecting...', 'success', 2000)
+  const basePath = uiBasePath() || '/auth/'
+  window.location.href = `${basePath}${token}`
+}
+
+function handleRemoteAuthError(errorMsg) {
+  // Error is already shown in the RemoteAuth component, don't show toast
+}
+
+function handleHeaderLinkClick(event) {
+  const target = event.target
+  if (target.tagName === 'A' && target.classList.contains('inline-link')) {
+    event.preventDefault()
+    const action = target.dataset.action
+    if (action === 'remote') {
+      switchToRemote()
+    } else if (action === 'local') {
+      switchToLocal()
+    }
+  }
+}
+
+// Autofocus primary button when the view becomes ready
+watch(initializing, (newVal) => {
+  if (!newVal) {
+    nextTick(() => focusDialogButton(buttonRow.value))
+  }
+})
+
+onMounted(async () => {
+  await fetchSettings()
+  // 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
+  document.addEventListener('click', handleHeaderLinkClick)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleHeaderLinkClick)
+})
+
+defineExpose({
+  showMessage,
+  isAuthenticated,
+  session
+})
+</script>
+
+<style scoped>
+.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 {
+  max-width: 520px;
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+}
+
+.auth-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+}
+
+.view-lede :deep(.inline-link) {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: opacity 0.15s;
+  font-weight: 400;
+}
+
+.view-lede :deep(.inline-link:hover) {
+  opacity: 0.8;
+  text-decoration: underline;
+}
+</style>

frontend/src/components/SessionList.vue

@@ -0,0 +1,244 @@
+<template>
+  <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>
+        <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.key"
+                :class="['session-item', {
+                  'is-current': session.is_current && !hoveredIp && !hoveredCredentialUuid,
+                  'is-hovered': hoveredSession?.key === session.key,
+                  'is-linked-credential': hoveredCredentialUuid === session.credential
+                }]"
+                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>
+                  <div class="item-actions">
+                    <span v-if="session.is_current && !hoveredIp && !hoveredCredentialUuid" class="badge badge-current">Current</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.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" @click="copyIp(session.ip)" title="Click to copy full IP">{{ displayIp(session.ip) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <div v-else class="empty-state"><p>{{ emptyMessage }}</p></div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<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: 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', 'navigate-out'])
+
+const authStore = useAuthStore()
+
+const hoveredIp = ref(null)
+const hoveredSession = ref(null)
+
+const handleSessionFocus = (session) => {
+  hoveredSession.value = session
+  hoveredIp.value = session.ip || null
+  emit('sessionHover', session)
+}
+
+const handleSessionBlur = (event) => {
+  // Only clear if focus moved outside this element
+  if (!event.currentTarget.contains(event.relatedTarget)) {
+    hoveredSession.value = null
+    hoveredIp.value = null
+    emit('sessionHover', null)
+  }
+}
+
+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
+  const protocol = host.includes(':') ? 'http' : 'https'
+  return `${protocol}://${host}`
+}
+
+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 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 isSameHost = ip => currentHostIP.value && hostIP(ip) === currentHostIP.value
+
+const groupedSessions = computed(() => {
+  const groups = {}
+  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
+  }
+  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 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>

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,32 +1,55 @@
 <template>
-  <div v-if="userLoaded" class="user-info">
+  <div v-if="userLoaded" class="user-info" :class="{ 'has-extra': $slots.default }">
+    <div class="user-info-content">
+      <div class="user-picture">
+        <span>👤</span>
+      </div>
       <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>
+          <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>
-    <span><strong>Visits:</strong></span>
+      <div class="info-fields-block">
-    <span>{{ visits || 0 }}</span>
+        <div v-if="preferred_username" class="contact-item">🆔 {{ preferred_username }}</div>
-    <span><strong>Registered:</strong></span>
+        <a v-if="email" :href="`mailto:${email}`" class="contact-link">✉️ {{ email }}</a>
-    <span>{{ formatDate(createdAt) }}</span>
+        <a v-if="telephone" :href="`tel:${telephone}`" class="contact-link">📞 {{ telephone }}</a>
-    <span><strong>Last seen:</strong></span>
+      </div>
-    <span>{{ formatDate(lastSeen) }}</span>
+      <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>
+    <div v-if="$slots.default" class="user-info-extra">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { computed } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import { formatDate } from '@/utils/helpers'
 
 const props = defineProps({
   name: { type: String, required: true },
+  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 },
@@ -37,30 +60,67 @@ const props = defineProps({
   roleName: { type: String, default: '' }
 })
 
-const emit = defineEmits(['saved', 'editName'])
+const emit = defineEmits(['saved', 'edit'])
 const authStore = useAuthStore()
 
 const userLoaded = computed(() => !!props.name)
 </script>
 
 <style scoped>
-.user-info { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
+.user-info.has-extra {
-.user-info h3 { grid-column: span 2; }
+  grid-template-columns: minmax(0, 1fr) 14rem;
-.org-role-sub { grid-column: span 2; display:flex; flex-direction:column; margin: -0.15rem 0 0.25rem; }
+  grid-template-areas:
-.org-line { font-size: .7rem; font-weight:600; line-height:1.1; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+    "content extra";
-.role-line { font-size:.65rem; color: var(--color-text-muted); line-height:1.1; }
+  gap: 1.5rem;
-.user-info span { text-align: left; }
+}
-.user-name-heading { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.25rem 0; }
+
-.user-name-row { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; }
+.user-info:not(.has-extra) {
-.user-name-row.editing { flex: 1 1 auto; }
+  grid-template-columns: minmax(0, 1fr);
-.icon { flex: 0 0 auto; }
+  grid-template-areas:
-.display-name { font-weight: 600; font-size: 1.05em; line-height: 1.2; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    "content";
-.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); }
+@media (max-width: 720px) {
-.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.has-extra {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "content"
+      "extra";
+  }
+}
+
+.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"
+    ". info info";
+  gap: 0 1rem;
+  min-width: 0;
+}
+
+.user-picture { grid-area: picture; display: flex; align-items: flex-start; font-size: 2em; line-height: 1; }
+.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: 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/reset/ResetApp.vue

@@ -1,258 +0,0 @@
-<template>
-  <div class="app-shell">
-    <div v-if="status.show" class="global-status" style="display: block;">
-      <div :class="['status', status.type]">
-        {{ status.message }}
-      </div>
-    </div>
-
-    <main class="view-root">
-      <div class="view-content">
-        <div class="surface surface--tight" style="max-width: 560px; margin: 0 auto; width: 100%;">
-          <header class="view-header" style="text-align: center;">
-            <h1>🔑 Complete Your Passkey Setup</h1>
-            <p class="view-lede">
-              {{ subtitleMessage }}
-            </p>
-          </header>
-
-          <section class="section-block" v-if="initializing">
-            <div class="section-body center">
-              <p>Loading reset details…</p>
-            </div>
-          </section>
-
-          <section class="section-block" v-else-if="!canRegister">
-            <div class="section-body center">
-              <p>{{ errorMessage }}</p>
-              <div class="button-row center" style="justify-content: center;">
-                <button class="btn-secondary" @click="goHome">Return to sign-in</button>
-              </div>
-            </div>
-          </section>
-
-          <section class="section-block" v-else>
-            <div class="section-body">
-              <label class="name-edit">
-                <span>👤 Name</span>
-                <input
-                  type="text"
-                  v-model="displayName"
-                  :placeholder="namePlaceholder"
-                  :disabled="loading"
-                  maxlength="64"
-                  @keyup.enter="registerPasskey"
-                />
-              </label>
-              <p>Click below to finish {{ sessionDescriptor }}.</p>
-              <button
-                class="btn-primary"
-                :disabled="loading"
-                @click="registerPasskey"
-              >
-                {{ loading ? 'Registering…' : 'Register Passkey' }}
-              </button>
-            </div>
-          </section>
-        </div>
-      </div>
-    </main>
-  </div>
-</template>
-
-<script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
-import passkey from '@/utils/passkey'
-
-const status = reactive({
-  show: false,
-  message: '',
-  type: 'info'
-})
-
-const initializing = ref(true)
-const loading = ref(false)
-const token = ref('')
-const settings = ref(null)
-const userInfo = ref(null)
-const displayName = ref('')
-const errorMessage = ref('')
-let statusTimer = null
-
-const sessionDescriptor = computed(() => userInfo.value?.session_type || 'your enrollment')
-const namePlaceholder = computed(() => userInfo.value?.user?.user_name || 'Your name')
-const subtitleMessage = computed(() => {
-  if (initializing.value) return 'Preparing your secure enrollment…'
-  if (!canRegister.value) return 'This reset link is no longer valid.'
-  return `Finish setting up a passkey for ${userInfo.value?.user?.user_name || 'your account'}.`
-})
-
-const uiBasePath = computed(() => {
-  const base = settings.value?.ui_base_path || '/auth/'
-  if (base === '/') return '/'
-  return base.endsWith('/') ? base : `${base}/`
-})
-
-const canRegister = computed(() => !!(token.value && userInfo.value))
-
-function showMessage(message, type = 'info', duration = 3000) {
-  status.show = true
-  status.message = message
-  status.type = type
-  if (statusTimer) clearTimeout(statusTimer)
-  if (duration > 0) {
-    statusTimer = setTimeout(() => {
-      status.show = false
-    }, duration)
-  }
-}
-
-async function fetchSettings() {
-  try {
-    const res = await fetch('/auth/api/settings')
-    if (!res.ok) return
-    const data = await res.json()
-    settings.value = data
-    if (data?.rp_name) {
-      document.title = `${data.rp_name} · Passkey Setup`
-    }
-  } catch (error) {
-    console.warn('Unable to load settings', error)
-  }
-}
-
-async function fetchUserInfo() {
-  if (!token.value) return
-  try {
-    const res = await fetch(`/auth/api/user-info?reset=${encodeURIComponent(token.value)}`, {
-      method: 'POST'
-    })
-    if (!res.ok) {
-      const payload = await safeParseJson(res)
-      const detail = payload?.detail || 'Reset link is invalid or expired.'
-      errorMessage.value = detail
-      showMessage(detail, 'error', 0)
-      return
-    }
-    userInfo.value = await res.json()
-  } catch (error) {
-    console.error('Failed to load user info', error)
-    const message = 'We could not load your reset details. Try refreshing the page.'
-    errorMessage.value = message
-    showMessage(message, 'error', 0)
-  }
-}
-
-async function registerPasskey() {
-  if (!canRegister.value || loading.value) return
-  loading.value = true
-  showMessage('Starting passkey registration…', 'info')
-
-  let result
-  try {
-    const nameValue = displayName.value.trim() || null
-    result = await passkey.register(token.value, nameValue)
-  } catch (error) {
-    loading.value = false
-    const message = error?.message || 'Passkey registration cancelled'
-    const cancelled = message === 'Passkey registration cancelled'
-    showMessage(cancelled ? message : `Registration failed: ${message}`, cancelled ? 'info' : 'error', 4000)
-    return
-  }
-
-  try {
-    await setSessionCookie(result.session_token)
-  } catch (error) {
-    loading.value = false
-    const message = error?.message || 'Failed to establish session'
-    showMessage(message, 'error', 4000)
-    return
-  }
-
-  showMessage('Passkey registered successfully!', 'success', 2000)
-  setTimeout(() => {
-    loading.value = false
-    redirectHome()
-  }, 800)
-}
-
-async function setSessionCookie(sessionToken) {
-  const response = await fetch('/auth/api/set-session', {
-    method: 'POST',
-    headers: {
-      Authorization: `Bearer ${sessionToken}`
-    }
-  })
-  const payload = await safeParseJson(response)
-  if (!response.ok || payload?.detail) {
-    const detail = payload?.detail || 'Session could not be established.'
-    throw new Error(detail)
-  }
-  return payload
-}
-
-function redirectHome() {
-  const target = uiBasePath.value || '/auth/'
-  if (window.location.pathname !== target) {
-    history.replaceState(null, '', target)
-  }
-  window.location.reload()
-}
-
-function goHome() {
-  redirectHome()
-}
-
-function extractTokenFromPath() {
-  const segments = window.location.pathname.split('/').filter(Boolean)
-  if (!segments.length) return ''
-  const candidate = segments[segments.length - 1]
-  const prefix = segments.slice(0, -1)
-  if (prefix.length > 1) return ''
-  if (prefix.length === 1 && prefix[0] !== 'auth') return ''
-  if (!candidate.includes('.')) return ''
-  return candidate
-}
-
-async function safeParseJson(response) {
-  try {
-    return await response.json()
-  } catch (error) {
-    return null
-  }
-}
-
-onMounted(async () => {
-  token.value = extractTokenFromPath()
-  await fetchSettings()
-  if (!token.value) {
-    const message = 'Reset link is missing or malformed.'
-    errorMessage.value = message
-    showMessage(message, 'error', 0)
-    initializing.value = false
-    return
-  }
-  await fetchUserInfo()
-  initializing.value = false
-})
-</script>
-
-<style scoped>
-.center {
-  text-align: center;
-}
-
-.button-row.center {
-  display: flex;
-  justify-content: center;
-}
-
-.section-body {
-  gap: 1.25rem;
-}
-
-.name-edit span {
-  color: var(--color-text-muted);
-  font-size: 0.9rem;
-}
-</style>

frontend/src/restricted/RestrictedApp.vue

@@ -1,207 +0,0 @@
-<template>
-  <div class="app-shell">
-    <div v-if="status.show" class="global-status" style="display: block;">
-      <div :class="['status', status.type]">
-        {{ status.message }}
-      </div>
-    </div>
-
-    <main class="view-root">
-      <div class="view-content">
-        <div class="surface surface--tight" style="max-width: 520px; margin: 0 auto; width: 100%;">
-          <header class="view-header" style="text-align: center;">
-            <h1>🚫 Access Restricted</h1>
-            <p class="view-lede">{{ headerMessage }}</p>
-          </header>
-
-          <section class="section-block" v-if="initializing">
-            <div class="section-body center">
-              <p>Checking your session…</p>
-            </div>
-          </section>
-
-          <section class="section-block" v-else>
-            <div class="section-body center" style="gap: 1.75rem;">
-              <p>{{ detailText }}</p>
-
-              <div class="button-row center" style="justify-content: center;">
-                <button v-if="canAuthenticate" class="btn-primary" :disabled="loading" @click="authenticateUser">
-                  {{ loading ? 'Signing in…' : 'Sign in with Passkey' }}
-                </button>
-                <button class="btn-secondary" :disabled="loading" @click="returnHome">
-                  Go back to Auth Home
-                </button>
-              </div>
-            </div>
-          </section>
-        </div>
-      </div>
-    </main>
-  </div>
-</template>
-
-<script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
-import passkey from '@/utils/passkey'
-
-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 fallbackDetail = ref('')
-let statusTimer = null
-
-const isAuthenticated = computed(() => !!userInfo.value?.authenticated)
-const canAuthenticate = computed(() => !initializing.value && !isAuthenticated.value)
-const uiBasePath = computed(() => {
-  const base = settings.value?.ui_base_path || '/auth/'
-  if (base === '/') return '/'
-  return base.endsWith('/') ? base : `${base}/`
-})
-
-const headerMessage = computed(() => {
-  if (initializing.value) return 'Checking your access permissions…'
-  if (isAuthenticated.value) {
-    return 'Your account is signed in, but this resource needs extra permissions.'
-  }
-  return 'Sign in to continue to the requested resource.'
-})
-
-const detailText = computed(() => {
-  if (isAuthenticated.value) {
-    return fallbackDetail.value || 'You do not have the required permissions to view this page.'
-  }
-  return fallbackDetail.value || 'Use your registered passkey to sign in securely.'
-})
-
-function showMessage(message, type = 'info', duration = 3000) {
-  status.show = true
-  status.message = message
-  status.type = type
-  if (statusTimer) clearTimeout(statusTimer)
-  if (duration > 0) {
-    statusTimer = setTimeout(() => {
-      status.show = false
-    }, duration)
-  }
-}
-
-async function fetchSettings() {
-  try {
-    const res = await fetch('/auth/api/settings')
-    if (!res.ok) return
-    const data = await res.json()
-    settings.value = data
-    if (data?.rp_name) {
-      document.title = `${data.rp_name} · Access Restricted`
-    }
-  } catch (error) {
-    console.warn('Unable to load settings', error)
-  }
-}
-
-async function fetchUserInfo() {
-  try {
-    const res = await fetch('/auth/api/user-info', { method: 'POST' })
-    if (!res.ok) {
-      const payload = await safeParseJson(res)
-      fallbackDetail.value = payload?.detail || 'Please sign in to continue.'
-      return
-    }
-    userInfo.value = await res.json()
-  } catch (error) {
-    console.error('Failed to load user info', error)
-    fallbackDetail.value = 'We were unable to verify your session. Try again shortly.'
-  }
-}
-
-async function authenticateUser() {
-  if (!canAuthenticate.value || loading.value) return
-  loading.value = true
-  showMessage('Starting authentication…', 'info')
-
-  let result
-  try {
-    result = await passkey.authenticate()
-  } catch (error) {
-    loading.value = false
-    const message = error?.message || 'Passkey authentication cancelled'
-    const cancelled = message === 'Passkey authentication cancelled'
-    showMessage(cancelled ? message : `Authentication failed: ${message}`, cancelled ? 'info' : 'error', 4000)
-    return
-  }
-
-  try {
-    await setSessionCookie(result.session_token)
-  } catch (error) {
-    loading.value = false
-    const message = error?.message || 'Failed to establish session'
-    showMessage(message, 'error', 4000)
-    return
-  }
-
-  showMessage('Signed in successfully!', 'success', 2000)
-  setTimeout(() => {
-    loading.value = false
-    window.location.reload()
-  }, 800)
-}
-
-async function setSessionCookie(sessionToken) {
-  const response = await fetch('/auth/api/set-session', {
-    method: 'POST',
-    headers: {
-      Authorization: `Bearer ${sessionToken}`
-    }
-  })
-  const payload = await safeParseJson(response)
-  if (!response.ok || payload?.detail) {
-    const detail = payload?.detail || 'Session could not be established.'
-    throw new Error(detail)
-  }
-  return payload
-}
-
-function returnHome() {
-  const target = uiBasePath.value || '/auth/'
-  if (window.location.pathname !== target) {
-    history.replaceState(null, '', target)
-  }
-  window.location.href = target
-}
-
-async function safeParseJson(response) {
-  try {
-    return await response.json()
-  } catch (error) {
-    return null
-  }
-}
-
-onMounted(async () => {
-  await fetchSettings()
-  await fetchUserInfo()
-  if (!canAuthenticate.value && !isAuthenticated.value && !fallbackDetail.value) {
-    fallbackDetail.value = 'Please try signing in again.'
-  }
-  initializing.value = false
-})
-</script>
-
-<style scoped>
-.center {
-  text-align: center;
-}
-
-.button-row.center {
-  display: flex;
-  justify-content: center;
-  gap: 0.75rem;
-}
-</style>

frontend/src/restricted/main.js

@@ -1,5 +0,0 @@
-import { createApp } from 'vue'
-import RestrictedApp from './RestrictedApp.vue'
-import '@/assets/style.css'
-
-createApp(RestrictedApp).mount('#app')

frontend/src/stores/auth.js

@@ -1,13 +1,19 @@
 import { defineStore } from 'pinia'
 import { register, authenticate } from '@/utils/passkey'
+import { getSettings } from '@/utils/settings'
+import { apiJson } 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, session_type, authenticated}
+    userInfo: null, // Contains the full user info response: {user, credentials, aaguid_info}
-    settings: null, // Server provided settings (/auth/settings)
+    ctx: null, // Session context from validate
     isLoading: false,
 
+    // Settings
+    settings: null,
+
     // UI State
     currentView: 'login',
     status: {
@@ -17,57 +23,40 @@ export const useAuthStore = defineStore('auth', {
     },
   }),
   getters: {
-    uiBasePath(state) {
-      const configured = state.settings?.ui_base_path || '/auth/'
-      if (!configured.endsWith('/')) return `${configured}/`
-      return configured
-    },
-    adminUiPath() {
-      const base = this.uiBasePath
-      return base === '/' ? '/admin/' : `${base}admin/`
-    },
   },
   actions: {
     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)
       }
     },
-    uiHref(suffix = '') {
+    async setSessionCookie(result) {
-      const trimmed = suffix.startsWith('/') ? suffix.slice(1) : suffix
+      if (!result?.session_token) {
-      if (!trimmed) return this.uiBasePath
+        console.error('setSessionCookie called with missing session_token:', result)
-      if (this.uiBasePath === '/') return `/${trimmed}`
+        throw new Error('Authentication response missing session_token')
-      return `${this.uiBasePath}${trimmed}`
+      }
-    },
+      return await apiJson('/auth/api/set-session', {
-    adminHomeHref() {
-      return this.adminUiPath
-    },
-    async setSessionCookie(sessionToken) {
-      const response = await fetch('/auth/api/set-session', {
         method: 'POST',
-        headers: {'Authorization': `Bearer ${sessionToken}`},
+        headers: {'Authorization': `Bearer ${result.session_token}`},
       })
-      const result = await response.json()
-      if (result.detail) {
-        throw new Error(result.detail)
-      }
-      return result
     },
     async register() {
       this.isLoading = true
       try {
         const result = await register()
-        await this.setSessionCookie(result.session_token)
+        await this.setSessionCookie(result)
         await this.loadUserInfo()
         this.selectView()
         return result
@@ -80,7 +69,7 @@ export const useAuthStore = defineStore('auth', {
       try {
         const result = await authenticate()
 
-        await this.setSessionCookie(result.session_token)
+        await this.setSessionCookie(result)
         await this.loadUserInfo()
         this.selectView()
 
@@ -91,58 +80,70 @@ export const useAuthStore = defineStore('auth', {
     },
     selectView() {
       if (!this.userInfo) this.currentView = 'login'
-      else if (this.userInfo.authenticated) this.currentView = 'profile'
+      else this.currentView = 'profile'
-      else this.currentView = 'login'
-    },
-    async loadUserInfo() {
-      const response = await fetch('/auth/api/user-info', { method: 'POST' })
-      let result = null
-      try {
-        result = await response.json()
-      } catch (_) {
-        // ignore JSON parse errors (unlikely)
-      }
-      if (response.status === 401 && result?.detail) {
-        this.showMessage(result.detail, 'error', 5000)
-        throw new Error(result.detail)
-      }
-      if (result?.detail) {
-        // Other error style
-        this.showMessage(result.detail, 'error', 5000)
-        throw new Error(result.detail)
-      }
-      this.userInfo = result
-      console.log('User info loaded:', result)
     },
     async loadSettings() {
+      this.settings = await getSettings()
+    },
+    async loadUserInfo() {
       try {
-  const res = await fetch('/auth/api/settings')
+        this.userInfo = await apiJson('/auth/api/user-info', { method: 'GET' })
-        if (!res.ok) return
+        updateThemeFromSession(this.userInfo)
-        const data = await res.json()
+        console.log('User info loaded:', this.userInfo)
-        this.settings = data
+      } catch (error) {
-        if (data?.rp_name) {
+        // Suppress toast for 401/403 errors - the auth iframe will handle these
-          document.title = data.rp_name
+        if (error.status === 401 || error.status === 403) {
+          console.log('Authentication required:', error.message)
+        } else {
+          this.showMessage(error.message || 'Failed to load user info', 'error', 5000)
         }
-      } catch (_) {
+        throw error
-        // ignore
       }
     },
     async deleteCredential(uuid) {
-  const response = await fetch(`/auth/api/credential/${uuid}`, {method: 'Delete'})
+      await apiJson(`/auth/api/user/credential/${uuid}`, { method: 'DELETE' })
-      const result = await response.json()
-      if (result.detail) throw new Error(`Server: ${result.detail}`)
-
       await this.loadUserInfo()
     },
+    async terminateSession(sessionKey) {
+      try {
+        const payload = await apiJson(`/auth/api/user/session/${sessionKey}`, { method: 'DELETE' })
+        if (payload?.current_session_terminated) {
+          sessionStorage.clear()
+          location.reload()
+          return
+        }
+        await this.loadUserInfo()
+        this.showMessage('Session terminated', 'success', 2500)
+      } catch (error) {
+        console.error('Terminate session error:', error)
+        throw error
+      }
+    },
     async logout() {
       try {
-        await fetch('/auth/api/logout', {method: 'POST'})
+        await apiJson('/auth/api/logout', {method: 'POST'})
         sessionStorage.clear()
         location.reload()
       } catch (error) {
         console.error('Logout error:', error)
+        // Suppress toast for 401/403 errors - the auth iframe will handle these
+        if (error.status !== 401 && error.status !== 403) {
           this.showMessage(error.message, 'error')
         }
+      }
+    },
+    async logoutEverywhere() {
+      try {
+        await apiJson('/auth/api/user/logout-all', {method: 'POST'})
+        sessionStorage.clear()
+        location.reload()
+      } catch (error) {
+        console.error('Logout-all error:', error)
+        // Suppress toast for 401/403 errors - the auth iframe will handle these
+        if (error.status !== 401 && error.status !== 403) {
+          this.showMessage(error.message, 'error')
+        }
+      }
     },
   }
 })

frontend/src/utils/awaitable-websocket.js

@@ -5,8 +5,8 @@ class AwaitableWebSocket extends WebSocket {
   #opened = false
 
   constructor(resolve, reject, url, protocols, binaryType) {
-    // Support relative URLs even on old browsers that don't
+    // Support relative URLs even on old browsers that don't natively support them
-    super(new URL(url, location.href.replace(/^http/, 'ws')), protocols)
+    super(new URL(url, document.baseURI.replace(/^http/, 'ws')), protocols)
     this.binaryType = binaryType || 'blob'
     this.onopen = () => {
       this.#opened = true
@@ -18,12 +18,36 @@ class AwaitableWebSocket extends WebSocket {
     }
     this.onclose = e => {
       if (!this.#opened) {
-        reject(new Error(`WebSocket ${this.url} failed to connect, code ${e.code}`))
+        reject(new Error(`Failed to connect to server (code ${e.code})`))
         return
       }
-      this.#err = e.wasClean
+      // Create user-friendly close messages
-        ? new Error(`Websocket ${this.url} closed ${e.code}`)
+      let message
-        : new Error(`WebSocket ${this.url} closed with error ${e.code}`)
+      if (e.wasClean) {
+        // Standard close codes
+        switch (e.code) {
+          case 1000: message = 'Connection closed normally'; break
+          case 1001: message = 'Server is going away'; break
+          case 1002: message = 'Protocol error'; break
+          case 1003: message = 'Unsupported data received'; break
+          case 1006: message = 'Connection lost unexpectedly'; break
+          case 1007: message = 'Invalid data received'; break
+          case 1008: message = 'Policy violation'; break
+          case 1009: message = 'Message too large'; break
+          case 1010: message = 'Extension negotiation failed'; break
+          case 1011: message = 'Server encountered an error'; break
+          case 1012: message = 'Server is restarting'; break
+          case 1013: message = 'Server is overloaded, try again later'; break
+          case 1014: message = 'Bad gateway'; break
+          case 1015: message = 'TLS handshake failed'; break
+          default: message = `Connection closed (code ${e.code})`
+        }
+      } else {
+        message = e.code === 1006
+          ? 'Connection lost unexpectedly'
+          : `Connection closed with error (code ${e.code})`
+      }
+      this.#err = new Error(message)
       this.#waiting.splice(0).forEach(p => p.reject(this.#err))
     }
   }
@@ -51,17 +75,12 @@ class AwaitableWebSocket extends WebSocket {
       console.error("WebSocket received binary data, expected JSON string", data)
       throw new Error("WebSocket received binary data, expected JSON string")
     }
-    let parsed
     try {
-      parsed = JSON.parse(data)
+      return JSON.parse(data)
     } catch (err) {
       console.error("Failed to parse JSON from WebSocket message", data, err)
       throw new Error("Failed to parse JSON from WebSocket message")
     }
-    if (parsed.detail) {
-      throw new Error(`Server: ${parsed.detail}`)
-    }
-    return parsed
   }
 
   send_json(data) {

frontend/src/utils/base64url.js

@@ -0,0 +1,33 @@
+/**
+ * URL-safe Base64 encoding/decoding utilities.
+ *
+ * These functions handle base64url format (RFC 4648) which uses:
+ * - '-' instead of '+'
+ * - '_' instead of '/'
+ * - No padding '=' characters
+ */
+
+/**
+ * Decode a base64url string to Uint8Array.
+ * Handles both standard base64 and URL-safe base64 (with or without padding).
+ * @param {string} str - Base64url encoded string
+ * @returns {Uint8Array} - Decoded bytes
+ */
+export function b64dec(str) {
+  // Convert URL-safe characters to standard base64
+  const base64 = str.replace(/-/g, '+').replace(/_/g, '/')
+  // Add padding if needed
+  const padded = base64 + '='.repeat((4 - base64.length % 4) % 4)
+  return Uint8Array.from(atob(padded), c => c.charCodeAt(0))
+}
+
+/**
+ * Encode a Uint8Array to base64url string.
+ * @param {Uint8Array} bytes - Bytes to encode
+ * @returns {string} - Base64url encoded string (no padding)
+ */
+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

@@ -5,16 +5,18 @@ export function formatDate(dateString) {
 
   const date = new Date(dateString)
   const now = new Date()
-  const diffMs = now - date
+  const diffMs = date - now  // Changed to date - now for future/past
-  const diffMinutes = Math.floor(diffMs / (1000 * 60))
+  const isFuture = diffMs > 0
-  const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
+  const absDiffMs = Math.abs(diffMs)
-  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+  const diffMinutes = Math.round(absDiffMs / (1000 * 60))
+  const diffHours = Math.round(absDiffMs / (1000 * 60 * 60))
+  const diffDays = Math.round(absDiffMs / (1000 * 60 * 60 * 24))
 
-  if (diffMs < 0 || diffDays > 7) return date.toLocaleDateString()
+  if (absDiffMs < 1000 * 60) return 'Now'
-  if (diffMinutes === 0) return 'Just now'
+  if (diffMinutes <= 60) return isFuture ? `In ${diffMinutes} minute${diffMinutes === 1 ? '' : 's'}` : diffMinutes === 1 ? 'a minute ago' : `${diffMinutes} minutes ago`
-  if (diffMinutes < 60) return diffMinutes === 1 ? 'a minute ago' : `${diffMinutes} minutes ago`
+  if (diffHours <= 24) return isFuture ? `In ${diffHours} hour${diffHours === 1 ? '' : 's'}` : diffHours === 1 ? 'an hour ago' : `${diffHours} hours ago`
-  if (diffHours < 24) return diffHours === 1 ? 'an hour ago' : `${diffHours} hours ago`
+  if (diffDays <= 14) return isFuture ? `In ${diffDays} day${diffDays === 1 ? '' : 's'}` : diffDays === 1 ? 'a day ago' : `${diffDays} days ago`
-  return diffDays === 1 ? 'a day ago' : `${diffDays} days ago`
+  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
 }
 
 export function getCookie(name) {
@@ -22,3 +24,20 @@ export function getCookie(name) {
   const parts = value.split(`; ${name}=`)
   if (parts.length === 2) return parts.pop().split(';').shift()
 }
+
+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,35 +1,76 @@
 import { startRegistration, startAuthentication } from '@simplewebauthn/browser'
 import aWebSocket from '@/utils/awaitable-websocket'
+import { getSettings } from '@/utils/settings'
+import { showAuthIframe } from 'paskia'
 
-export async function register(resetToken = null, displayName = null) {
+// 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.
+async function makeUrl(path) {
+  const s = await getSettings()
+  const h = s?.auth_host
+  return h && location.host !== h ? `//${h}${path}` : path
+}
+
+export async function register(resetToken = null, displayName = null, onstartreg = null) {
   let params = []
   if (resetToken) params.push(`reset=${encodeURIComponent(resetToken)}`)
   if (displayName) params.push(`name=${encodeURIComponent(displayName)}`)
   const qs = params.length ? `?${params.join('&')}` : ''
-  const url = `/auth/ws/register${qs}`
+
-  const ws = await aWebSocket(url)
+  while (true) {
+    const ws = await aWebSocket(await makeUrl(`/auth/ws/register${qs}`))
     try {
-    const optionsJSON = await ws.receive_json()
+      const res = await ws.receive_json()
-    const registrationResponse = await startRegistration({ optionsJSON })
+
+      // Handle auth errors (401/403) with iframe
+      if ((res.status === 401 || res.status === 403) && res.auth?.iframe) {
+        ws.close()
+        await showAuthIframe(res.auth.iframe)
+        continue
+      }
+
+      // Handle other errors (status field present means error)
+      if (res.status) {
+        throw new Error(res.detail || `Registration failed: ${res.status}`)
+      }
+
+      // Notify caller that we're about to show the browser prompt
+      if (onstartreg) onstartreg()
+
+      const registrationResponse = await startRegistration(res)
       ws.send_json(registrationResponse)
-    return await ws.receive_json()
+
+      const result = await ws.receive_json()
+      if (result.status) {
+        throw new Error(result.detail || `Registration failed: ${result.status}`)
+      }
+      return result
     } catch (error) {
+      ws.close()
       console.error('Registration error:', error)
       // Replace useless and ugly error message from startRegistration
       throw Error(error.name === "NotAllowedError" ? 'Passkey registration cancelled' : error.message)
-  } finally {
+    }
-    ws.close()
   }
 }
 
-export async function authenticate() {
+export async function authenticate(queryString = null) {
-  const ws = await aWebSocket('/auth/ws/authenticate')
+  // 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 optionsJSON = await ws.receive_json()
+    let res = await ws.receive_json()
-    const authResponse = await startAuthentication({ optionsJSON })
+    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()
+
-    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/pow-test.js

@@ -0,0 +1,37 @@
+import { solvePoW, verifyPoW } from './pow.js'
+
+const TRIALS = 5
+const WORK = 10
+
+async function test() {
+  console.log(`Running ${TRIALS} trials with ${WORK} work units...\n`)
+
+  const times = []
+
+  for (let trial = 1; trial <= TRIALS; trial++) {
+    const challenge = crypto.getRandomValues(new Uint8Array(8))
+
+    const start = performance.now()
+    const solution = await solvePoW(challenge, WORK)
+    const elapsed = performance.now() - start
+
+    const valid = await verifyPoW(challenge, solution, WORK)
+
+    times.push(elapsed)
+
+    console.log(`Trial ${trial.toString().padStart(2)}: ${(elapsed / 1000).toFixed(3)}s, valid=${valid}`)
+  }
+
+  const avgTime = times.reduce((a, b) => a + b, 0) / times.length
+  const minTime = Math.min(...times)
+  const maxTime = Math.max(...times)
+
+  console.log('\n--- Summary ---')
+  console.log(`Trials: ${TRIALS}`)
+  console.log(`Work units: ${WORK}`)
+  console.log(`Avg time: ${(avgTime / 1000).toFixed(3)}s`)
+  console.log(`Min time: ${(minTime / 1000).toFixed(3)}s`)
+  console.log(`Max time: ${(maxTime / 1000).toFixed(3)}s`)
+}
+
+test()

frontend/src/utils/pow.js

@@ -0,0 +1,68 @@
+/**
+ * Proof of Work utility using PBKDF2-SHA512
+ *
+ * The PoW requires finding nonces where PBKDF2(challenge, nonce) produces
+ * output with a zero first byte. Each work unit requires finding one such nonce.
+ * All valid nonces are concatenated into a solution for server verification.
+ */
+
+/**
+ * Solve a Proof of Work challenge
+ *
+ * @param {Uint8Array|ArrayBuffer} challenge - 8-byte server-provided challenge
+ * @param {number} work - Number of PBKDF2 work units required
+ * @param {object} [options] - Optional parameters
+ * @param {AbortSignal} [options.signal] - AbortSignal to cancel the operation
+ * @returns {Promise<Uint8Array>} Solution: concatenated 8-byte nonces (8 * work bytes)
+ * @throws {Error} If challenge is invalid or operation is aborted
+ */
+export async function solvePoW(challenge, work, options = {}) {
+  const { signal } = options
+  const startTime = performance.now()
+
+  // Validate inputs
+  const challengeBytes = challenge instanceof ArrayBuffer
+    ? new Uint8Array(challenge)
+    : challenge
+
+  if (!(challengeBytes instanceof Uint8Array) || challengeBytes.length !== 8) {
+    throw new Error('Challenge must be exactly 8 bytes')
+  }
+
+  // Import challenge as PBKDF2 key material
+  const baseKey = await crypto.subtle.importKey('raw', challengeBytes, 'PBKDF2', false, ['deriveBits'])
+
+  // Build solution from found nonces
+  const solution = new Uint8Array(8 * work)
+  let totalIterations = 0
+  const mask = 0x7FF  // The client must work 2048x harder than the server
+
+  // Sequential nonce starting at zero (little-endian, using Uint32Array for efficient increment)
+  const nonce = new Uint32Array(2)
+
+  for (let i = 0; i < work; i++) {
+    if (signal?.aborted) {
+      throw new DOMException('PoW operation aborted', 'AbortError')
+    }
+
+    // Find a nonce where PBKDF2 output passes the mask check
+    let result
+    do {
+      totalIterations++
+      if (++nonce[0] === 0x100000000) ++nonce[1]  // Increment 64-bit little-endian nonce
+      result = new Uint32Array(await crypto.subtle.deriveBits(
+        { name: 'PBKDF2', salt: nonce, iterations: 128, hash: 'SHA-512'},
+        baseKey,
+        32
+      ))
+    } while (result[0] & mask)
+    solution.set(new Uint8Array(nonce.buffer), i * 8)
+  }
+
+  const elapsed = (performance.now() - startTime) / 1000
+  const expectedIterations = work * (mask + 1)
+  const luckRatio = (totalIterations / expectedIterations).toFixed(1)
+  const bench = totalIterations / ((mask + 1) * elapsed)
+  console.log(`PoW work=${work} solved in ${elapsed.toFixed(2)}s (${luckRatio}x expected ${bench.toFixed(1)} work/s)`)
+  return solution
+}

frontend/src/utils/settings.js

@@ -0,0 +1,29 @@
+let _settingsPromise = null
+let _settings = null
+
+export function getSettingsCached() { return _settings }
+
+export async function getSettings() {
+  if (_settings) return _settings
+  if (_settingsPromise) return _settingsPromise
+  _settingsPromise = fetch('/auth/api/settings')
+    .then(r => (r.ok ? r.json() : {}))
+    .then(obj => { _settings = obj || {}; return _settings })
+    .catch(() => { _settings = {}; return _settings })
+  return _settingsPromise
+}
+
+export function uiBasePath() {
+  const base = _settings?.ui_base_path || '/auth/'
+  if (base === '/') return '/'
+  return base.endsWith('/') ? base : base + '/'
+}
+
+export function adminUiPath() { return uiBasePath() === '/' ? '/admin/' : uiBasePath() + 'admin/' }
+
+export function makeUiHref(suffix = '') {
+  const trimmed = suffix.startsWith('/') ? suffix.slice(1) : suffix
+  if (!trimmed) return uiBasePath()
+  if (uiBasePath() === '/') return '/' + trimmed
+  return uiBasePath() + trimmed
+}

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

@@ -1,61 +1,142 @@
 import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
 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'
 
-// https://vite.dev/config/
+// Auth host mode: when set, clients accessing the auth host get /auth/ at / and /auth/admin/ at /admin/
-export default defineConfig(({ command, mode }) => ({
+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()
+        })
+        server.middlewares.use('/examples', serve)
+      }
+    },
+    {
+      name: 'move-html-files',
+      closeBundle() {
+        if (command !== 'build') return
+
+        const outDir = resolve(__dirname, '../paskia/frontend-build')
+        const moves = [
+          { from: 'auth.html', to: 'auth/index.html' },
+          { from: 'admin.html', to: 'admin/index.html' },
+          { from: 'restricted.html', to: 'restricted/index.html' },
+          { from: 'reset.html', to: 'reset/index.html' },
+          { from: 'forward.html', to: 'forward/index.html' }
+        ]
+
+        for (const { from, to } of moves) {
+          const fromPath = resolve(outDir, from)
+          const toPath = resolve(outDir, to)
+          if (existsSync(fromPath)) {
+            mkdirSync(resolve(outDir, to.split('/')[0]), { recursive: true })
+            renameSync(fromPath, toPath)
+          }
+        }
+      }
+    }
+  ].filter(Boolean),
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    }
   },
-  },
+  base: '/',
-  // Use absolute paths at dev, deploy under /auth/
-  base: command === 'build' ? '/auth/' : '/',
   server: {
     port: 4403,
-    proxy: {
+    allowedHosts: true,
-      '/auth/': {
+    fs: {
-        target: 'http://localhost:4402',
+      allow: ['..']
-        ws: true,
-        changeOrigin: false,
-        // We proxy API + WS under /auth/, but want Vite to serve the SPA entrypoints
-        // and static assets so that HMR works. Bypass tells http-proxy to skip
-        // proxying when we return a (possibly rewritten) local path.
-        bypass(req) {
-          const rawUrl = req.url || ''
-          // Strip query/hash to match path-only for SPA entrypoints with query params (e.g. ?reset=token)
-          const url = rawUrl.split('?')[0].split('#')[0]
-          // Bypass only root SPA entrypoints + static assets so Vite serves them for HMR.
-          // Admin API endpoints (e.g., /auth/admin/orgs) must still hit backend.
-          if (url === '/auth/' || url === '/auth') return '/'
-          if (url === '/auth/admin' || url === '/auth/admin/') return '/admin/'
-          if (url.startsWith('/auth/assets/')) return url.replace(/^\/auth/, '')
-          if (/^\/auth\/([a-z]+\.){4}[a-z]+\/?$/.test(url)) return '/reset/index.html'
-          if (/^\/([a-z]+\.){4}[a-z]+\/?$/.test(url)) return '/reset/index.html'
-          if (url === '/auth/restricted' || url === '/auth/restricted/') return '/restricted/index.html'
-          if (url === '/restricted' || url === '/restricted/') return '/restricted/index.html'
-          // Everything else (including /auth/admin/* APIs) should proxy.
-        }
-      }
     }
   },
   build: {
-    outDir: '../passkey/frontend-build',
+    outDir: '../paskia/frontend-build',
     emptyOutDir: true,
-    assetsDir: 'assets',
     rollupOptions: {
       input: {
-        index: resolve(__dirname, 'index.html'),
+        auth: resolve(__dirname, 'auth/index.html'),
-        admin: resolve(__dirname, 'admin/index.html'),
+        admin: resolve(__dirname, 'auth/admin/index.html'),
-        reset: resolve(__dirname, 'reset/index.html'),
+        restricted: resolve(__dirname, 'auth/restricted/index.html'),
-        restricted: resolve(__dirname, 'restricted/index.html')
+        reset: resolve(__dirname, 'int/reset/index.html'),
+        forward: resolve(__dirname, 'int/forward/index.html'),
       },
-      output: {}
+      output: {
+        entryFileNames: (chunkInfo) => {
+          return 'auth/assets/[name]-[hash].js'
+        },
+        chunkFileNames: (chunkInfo) => {
+          return 'auth/assets/[name]-[hash].js'
+        },
+        assetFileNames: (assetInfo) => {
+          return 'auth/assets/[name]-[hash][extname]'
+        }
+      }
     }
   }
 }))

oidc.md

@@ -0,0 +1,86 @@
+# 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)
+- `POST /auth/oidc/backchannel-logout` — Logout
+- `POST /auth/api/exchange` — Native auth code → cookie
+
+## 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,131 @@
+# 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.
+
+### 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.1.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,146 @@
+import { showAuthIframe, AuthCancelledError } from './overlay'
+
+export { AuthCancelledError }
+
+const DEFAULT_TIMEOUT_MS = 1000
+
+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 = DEFAULT_TIMEOUT_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