Change CLI to use --listen rather than positional hostport argument. Fix listening on all interfaces (runs lifespan twice, which needs to be OK). Update README with various CLI changes and more.

Add missing __init__ that was causing ModuleFoundError trying to import paskia.util.
Console startup box themed as well.
2026-02-05 02:54:07 +00:00 · 2026-02-05 02:33:05 +00:00 · 2026-01-31 00:30:14 +00:00 · 2026-01-31 00:25:38 +00:00 · 2026-01-30 23:31:06 +00:00 · 2026-01-30 22:59:52 +00:00
174 changed files with 22087 additions and 6599 deletions
@@ -3,7 +3,10 @@ dist/
 .*
 !.gitignore
 *.lock
-passkey-auth.sqlite
+package-lock.json
-/passkey/frontend-build
+paskia.sqlite
-/test_*.py
+paskia.jsonl
-passkey/_version.py
+/paskia/frontend-build
 /paskia/_version.py
 coverage-html/
 e2e/coverage-frontend/
@@ -1,104 +0,0 @@
 # PassKey Auth API Documentation
 This document lists the HTTP and WebSocket endpoints exposed by the PassKey Auth
 service and how they behave depending on whether a dedicated authentication host
 (`--auth-host` / environment `PASSKEY_AUTH_HOST`) is configured.
 ## Base Paths & Host Modes
 Two deployment modes:
 1. Multi‑host (default – no `--auth-host` provided)
   - All endpoints are reachable on any host under the `/auth/` prefix.
   - A convenience root (`/`) also serves the main app.
 2. Dedicated auth host (`--auth-host auth.example.com`)
   - The specified auth host serves the UI at the root (`/`, `/admin/`, reset tokens, etc.).
   - Other (non‑auth) hosts show a lightweight account summary at `/` or `/auth/`, while other UI routes still redirect to the auth host.
   - Restricted endpoints on non‑auth hosts return `404` instead of redirecting.
 ### Path Mapping When Auth Host Enabled
 | Purpose | On Auth Host | On Other Hosts (incoming) | Action |
 |---------|--------------|---------------------------|--------|
 | Main UI | `/` | `/auth/` or `/` | Serve account summary SPA (no redirect) |
 | Admin UI root | `/admin/` | `/auth/admin/` or `/admin/` | Redirect -> auth host `/admin/` (strip `/auth`) |
 | Reset / device addition token | `/{token}` | `/auth/{token}` | Redirect -> auth host `/{token}` (strip `/auth`) |
 | Static assets | `/auth/assets/*` | `/auth/assets/*` | Served directly (no redirect) |
 | Unrestricted API | `/auth/api/...` | `/auth/api/...` | Served directly |
 | Restricted API (admin,user,ws namespaces) | `/auth/api/{admin|user|ws}*` | same path | 404 on non‑auth hosts |
 | WebSocket (register/auth) | `/auth/ws/*` | `/auth/ws/*` | 404 on non‑auth hosts |
 Notes:
 - “Strip `/auth`” means only when the path starts with that exact segment.
 - A reset token is a single path segment validated by server logic; malformed tokens 404.
 - Method and body are preserved for UI redirects (307 Temporary Redirect).
 ## HTTP UI Endpoints
 | Method | Path (multi‑host) | Path (auth host) | Description |
 |--------|-------------------|------------------|-------------|
 | GET | `/auth/` | `/` | Main authentication SPA (non-auth hosts show an account summary view) |
 | GET | `/auth/admin/` | `/admin/` | Admin SPA root |
 | GET | `/auth/{reset_token}` | `/{reset_token}` | Reset / device addition SPA (token validated) |
 | GET | `/auth/restricted` | `/restricted` | Restricted / permission denied SPA |
 ## Core API (Unrestricted – available on all hosts)
 Always under `/auth/api/` (even on auth host):
 | Method | Path | Description |
 |--------|------|-------------|
 | POST | `/auth/api/validate` | Validate & (conditionally) renew session |
 | GET | `/auth/api/forward` | Auth proxy endpoint for reverse proxies (204 or 4xx) |
 | POST | `/auth/api/set-session` | Set cookie from Bearer token |
 | POST | `/auth/api/logout` | Logout current session |
 | POST | `/auth/api/user-info` | Authenticated user + context info (also handles reset tokens) |
 | POST | `/auth/api/create-link` | Create a device addition link (reset token) |
 | DELETE | `/auth/api/credential/{uuid}` | Delete user credential |
 | DELETE | `/auth/api/session/{session_id}` | Terminate a specific session |
 | POST | `/auth/api/user/logout-all` | Terminate all sessions for the user |
 | PUT | `/auth/api/user/display-name` | Update display name |
 ## Restricted API Namespaces
 When `--auth-host` is set, requests to these paths on non‑auth hosts return 404:
 | Namespace | Examples |
 |-----------|----------|
 | `/auth/api/admin` | `/auth/api/admin/orgs`, `/auth/api/admin/orgs/{uuid}` ... |
 | `/auth/api/user` | Segment prefix – includes `/auth/api/user/...` endpoints (logout-all, display-name, session, credential) |
 | `/auth/api/ws` | (Reserved / future) |
 ## WebSockets (Passkey)
 | Path | Description | Host Mode Behavior |
 |------|-------------|--------------------|
 | `/auth/ws/register` | Register new credential (new or existing user) | 404 on non‑auth hosts when auth host configured |
 | `/auth/ws/authenticate` | Authenticate user & issue session | 404 on non‑auth hosts when auth host configured |
 ## Redirection & Status Codes
 | Scenario | Response |
 |----------|----------|
 | UI path on non‑auth host (auth host configured) | 307 redirect to auth host; `/auth` prefix stripped |
 | Reset token UI path on non‑auth host | 307 redirect (token preserved) |
 | Restricted API on non‑auth host | 404 |
 | Unrestricted API on any host | Normal response |
 | No auth host configured | All hosts behave like multi-host mode (no redirects; everything accessible) |
 ## Headers for /auth/api/forward
 See `Headers.md` for details of headers returned on success (204).
 ## Notes for Integrators
 1. Always use absolute `/auth/api/...` paths for programmatic requests (they do not move when an auth host is introduced).
 2. Bookmark / deep links to UI should resolve correctly after redirection if users access via a non-auth application host.
 3. Treat 404 from restricted namespaces on non-auth hosts as a signal to direct users to the central auth site.
 ## Environment & CLI Summary
 | Option | Effect |
 |--------|--------|
 | `--auth-host` / `PASSKEY_AUTH_HOST` | Enables dedicated host mode, root-mounts UI there, restricts certain namespaces elsewhere |
 ---
 This document reflects current behavior of the middleware-based host routing logic.
@@ -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.
@@ -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.
@@ -1,129 +1,67 @@
-# 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.
+![Screenshot](https://git.zi.fi/leovasanko/paskia/raw/main/docs/screenshots/forbidden-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 (optional)
   * Org admins control their users and roles
   * Master admin can create multiple independent orgs
   * Master admin makes permissions available for orgs to assign
 - User Profile and Administration by API and web interface.
 under `/auth/` or `auth.example.com`
 - Reset tokens and additional device linking via QR code or codewords.
 - Pure Python, FastAPI, packaged with prebuilt Vue frontend
- Caddy integration: see `CADDY.md` for short, copy-paste snippets to secure your site with Caddy.
+Two interfaces:
 - API fetch: auth checks and login without leaving your app
 - Forward-auth proxy: protect any unprotected site or service (Caddy, Nginx)
-## Requirements
+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.
- Python 3.9+
+Single Sign-On (SSO): Users register once and authenticate across all applications under your domain name (configured rp-id).
 - A WebAuthn-compatible authenticator (security key, biometric device, etc.)
 ## 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
 There is no config file. All settings are passed as CLI options:
 ```text
-passkey-auth serve [host:port] [--options]
+paskia [options]
-passkey-auth dev   [--options]
+paskia reset [user]     # Generate passkey reset link
 ```
-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"* | Name shown during passkey registration | Same as rp-id |
 | --origin *url* | Restrict allowed origins for WebSocket auth (repeatable) | All under rp-id |
 | --auth-host *url* | Dedicated authentication site, e.g. **auth.example.com** | Use **/auth/** path on each site |
-```fish
+## Further Documentation
 # Production style (no reload)
 passkey-auth serve
 passkey-auth serve 0.0.0.0:8080 --rp-id example.com --origin https://example.com
-# Development (auto-reload)
+- [Caddy configuration](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/Caddy.md)
-passkey-auth dev            # localhost:4401
+- [Trusted Headers for Backend Apps](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/Headers.md)
-passkey-auth dev :5500      # localhost on port 5500
+- [Frontend integration](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/Integration.md)
-passkey-auth dev 127.0.0.1  # host only, default port 4401
+- [Paskia API](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/API.md)
 ```
 Available options (both subcommands):
 ```text
 --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
 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
 uv run ruff check .
 uv run ruff format .
 # Or with hatch
 hatch run ruff check .
 hatch run ruff format .
 ```
 ### Project Structure
 ```
 passkeyauth/
 ├── passkeyauth/
 │   ├── __init__.py
 │   └── main.py          # FastAPI server with WebSocket support
 ├── static/
 │   └── index.html       # Frontend interface
 ├── pyproject.toml       # Modern Python packaging configuration
 └── README.md
 ```
 ## Technical Details
 ### WebAuthn Configuration
 - **Relying Party ID**: `localhost` (for development)
 - **Resident Keys**: Required (enables discoverable credentials)
 - **User Verification**: Preferred
 - **Supported Algorithms**: ECDSA-SHA256, RSASSA-PKCS1-v1_5-SHA256
 ### WebSocket Message Flow
 1. Client connects to `/ws/{client_id}`
 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
 - This is a minimal demo - challenges are stored locally per WebSocket connection
 - 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
 MIT License - feel free to use this as a starting point for your own WebAuthn implementations!
@@ -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
 	}
 }
@@ -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 |
 | POST | `/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.
@@ -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.
@@ -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.
@@ -0,0 +1,43 @@
 # Integrating Paskia with your App
 Protect API routes with forward-auth (see [Caddy configuration](Caddy.md)). Optionally protect your app assets and not just the API.
 Catch response status 401/403 in fetch calls to protected endpoints and implement authentication flow in this case. The response is JSON and contains `detail` (an error message describing what is needed) and `auth.iframe` (a URL). Render that URL in an iframe and retry the request after authentication (see below).
 While the app is in (active) use, call `/auth/api/validate` occasionally to keep the session alive (session lifetime is 24h), otherwise the user will have to login every day. Max-age limits are unaffected by this and can be used on endpoints needing to reauthenticate with passkey more frequently.
 Fetch `/auth/api/user-info` to display user/session details, or link to `/auth/` if you prefer using the built-in profile UI and not having to do anything more.
 ## Authentication Flow (iframe)
 ```js
 // Show an authentication dialog
 const iframe = document.createElement('iframe')
 iframe.src = auth.url   // from 401/403 response JSON
 iframe.style.cssText = `
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 9999;
  background: transparent;
  backdrop-filter: blur(0.1rem) brightness(0.7);
 `
 document.body.appendChild(iframe)
 // Wait until user is finished with the dialog
 const handler = ev => {
  if (ev.origin !== location.origin) return
  iframe.remove()
  removeEventListener('message', handler)
  if (ev.data?.type === 'auth-success') retry_original_fetch()
 }
 addEventListener('message', handler)
 ```
 This describes the frontend flow for handling 401/403 responses from endpoints protected by Paskia forward-auth, without ever exiting your app.
 When a protected request fails, the backend returns 401 (needs auth / reauth) or 403 (missing permission). For API requests, the response is JSON that includes an iframe URL. Your app should render that URL in a full-screen iframe overlay, and retry the request after the iframe reports success. If it reports `auth-cancel`, don't try again. The backdrop for the dialog is a stylistic choice, and you can style the background shown with the dialog any way you wish, and consider using CSS file with the iframe rather than inline styles as used in the example.
 Following this flow the user gets authenticated properly and after that your app keeps running as if nothing ever happened.
@@ -0,0 +1,13 @@
 # Dependencies
 node_modules/
 # Test artifacts
 test-data/
 test-results/
 playwright-report/
 # Playwright
 .playwright/
 # Bun
 bun.lockb
@@ -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
 ```
@@ -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": "bunx playwright test",
    "test:headed": "bunx playwright test --headed",
    "test:debug": "bunx playwright test --debug",
    "test:ui": "bunx playwright test --ui",
    "test:coverage": "COVERAGE=1 bunx playwright test",
    "report": "bunx playwright show-report",
    "install:browsers": "bunx playwright install chromium"
  },
  "devDependencies": {
    "@playwright/test": "^1.49.0",
    "@simplewebauthn/browser": "^13.1.2",
    "@types/bun": "^1.3.3",
    "c8": "^10.1.3"
  }
 }
@@ -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: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',
          ],
        },
      },
    },
  ],
 })
@@ -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',
          ],
        },
      },
    },
  ],
 })
@@ -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.ctx.user.uuid).toBe(userUuid)
    expect(userInfo.ctx.user.display_name).toBe('Admin User')
    expect(userInfo.credentials).toBeDefined()
    expect(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.ctx.user.display_name}`)
    console.log(`✓ Credentials count: ${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)`)
    }
  })
 })
@@ -0,0 +1,606 @@
 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'
 /**
 * 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.
 */
 async function setupTestHarness(page: Page): Promise<void> {
  // 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('#auth-iframe', { timeout })
  const iframe = page.frameLocator('#auth-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('#auth-iframe', { state: 'detached', timeout })
 }
 /**
 * Click Back button in auth iframe.
 */
 async function clickBackInIframe(page: Page): Promise<void> {
  const iframe = page.frameLocator('#auth-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('#auth-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('#auth-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('#auth-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', 'POST').catch(e => e)
    console.log('✓ Auth iframe appeared on 401')
    // Verify it's in login mode (not reauth)
    const iframe = page.frameLocator('#auth-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', 'POST')
    // 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.ctx).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('#auth-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('#auth-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('#auth-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('#auth-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('#auth-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('#auth-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/')
    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)
  })
 })
@@ -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`)
  })
 })
@@ -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)
  },
 })
@@ -0,0 +1,487 @@
 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_light?: 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> {
  return 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)
      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) {
          ws.close()
          reject(new Error(data.detail))
          return
        }
        // Check if this is the final success response
        if (data.session_token) {
          ws.close()
          resolve(data)
          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 (!event.wasClean && event.code !== 1000) {
          reject(new Error(`WebSocket closed unexpectedly: ${event.code}`))
        }
      }
    })
  }, { baseUrl, resetToken: options.resetToken, displayName: options.displayName })
 }
 /**
 * 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> {
  return 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)
      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) {
          ws.close()
          reject(new Error(data.detail))
          return
        }
        // Check if this is the final success response
        if (data.session_token) {
          ws.close()
          resolve(data)
          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 (!event.wasClean && event.code !== 1000) {
          reject(new Error(`WebSocket closed unexpectedly: ${event.code}`))
        }
      }
    })
  }, { baseUrl })
 }
 /**
 * 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.post(`${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 }
 }
@@ -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 }
@@ -0,0 +1,134 @@
 import { 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 })
  }
  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.fastapi', 'localhost:4404',
        '--rp-id', 'localhost'
      ]
    : [
        'run', 'paskia', 'localhost:4404',
        '--rp-id', 'localhost'
      ]
  // Use a temporary jsonl file for test database
  const testDbFile = join(testDataDir, 'test-db.jsonl')
  // 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')
 }
@@ -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-db.jsonl')
  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')
 }
@@ -0,0 +1,15 @@
 {
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "types": ["bun-types"]
  },
  "include": ["tests/**/*.ts", "playwright.config.ts"],
  "exclude": ["node_modules"]
 }
@@ -0,0 +1,166 @@
 <!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 */
        }
        /* Login/reauth/forbidden dialog will appear in this iframe */
        #auth-iframe {
            /* Full viewport overlay */
            border: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            /* Optional transparent background with optional blur backdrop */
            color-scheme: auto;
            background: transparent;
            backdrop-filter: blur(.1rem) brightness(0.7);
            -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
        }
        /* Prevent background scroll when auth-iframe is shown */
        body:has(#auth-iframe) {
            overflow: hidden;
        }
    </style>
 </head>
 <body>
    <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', 'POST')">📋 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>
        const output = document.getElementById('output');
        let pendingCall = null;  // Stores the API call to retry after auth
        // The auth iframe posts messages when authentication completes or is cancelled.
        // Message types: 'auth-success' (proceed), 'auth-back' (user cancelled)
        // Errors during auth stay in the dialog allowing retry, no message is sent.
        window.addEventListener('message', (event) => {
            const { type, message } = event.data || {};
            if (type === 'auth-success') {
                log('✓ Authentication successful, retrying...');
                hideAuthIframe();
                // Retry the original API call that triggered authentication
                if (pendingCall) {
                    const { url, method } = pendingCall;
                    pendingCall = null;
                    apiCall(url, method);
                }
            } else if (type === 'auth-back') {
                log(message || 'Authentication cancelled');
                hideAuthIframe();
                pendingCall = null;
            }
        });
        // Make an API call, handling 401/403 by showing the auth iframe.
        // The server returns JSON with auth.iframe URL when authentication is needed.
        async function apiCall(url, method = 'GET') {
            log(`${method} ${url}...`);
            const response = await fetch(url, { method });
            // Server returns 401 (login/reauth) or 403 (missing permissions)
            // with a JSON body containing the iframe URL for authentication
            if (response.status === 401 || response.status === 403) {
                const data = await response.json();
                if (data.auth?.iframe) {
                    const mode = data.auth.mode;  // 'login' or 'reauth'
                    log(`${mode === 'reauth' ? 'Re-authentication' : 'Authentication'} required...`);
                    pendingCall = { url, method };
                    showAuthIframe(data.auth.iframe);
                    return;
                }
                log(`Error: ${response.status} - ${data.detail}`);
                return;
            }
            // Forward endpoint returns 204 on success (Caddy then adds Remote-* headers)
            if (response.status === 204) {
                log('✓ Success (204 No Content)\nHeaders:\n' +
                    [...response.headers].filter(([k]) => k.startsWith('remote-'))
                        .map(([k, v]) => `  ${k}: ${v}`).join('\n'));
                return;
            }
            if (!response.ok) {
                log(`Error: ${response.status} ${response.statusText}`);
                return;
            }
            const data = await response.json();
            log('✓ Response:\n' + JSON.stringify(data, null, 2));
        }
        async function logout() {
            await fetch('/auth/api/logout', { method: 'POST' });
            log('Logged out');
        }
        // Create fullscreen iframe for authentication.
        // The 'allow' attribute enables WebAuthn (passkey) API inside the iframe.
        function showAuthIframe(url) {
            hideAuthIframe();
            const iframe = document.createElement('iframe');
            iframe.id = 'auth-iframe';
            iframe.src = url;
            document.body.appendChild(iframe);
            log("Authentication dialog open...")
        }
        function hideAuthIframe() {
            document.getElementById('auth-iframe')?.remove();
        }
        function log(msg) {
            output.textContent = msg;
        }
        // Browser mode: open the forward endpoint directly in a new window.
        // When Accept: text/html, the server redirects to the login page if needed,
        // then back to the original URL after authentication.
        function browserNav(url) {
            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>
@@ -0,0 +1,153 @@
 <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, createAuthIframe, removeAuthIframe } from 'paskia'
 import { getAuthIframeUrl } from '@/utils/api'
 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
 })
 const userUuid = computed(() => store.userInfo?.ctx.user.uuid)
 function terminateSession() {
  store.userInfo = null
  viewState.value = 'terminal'
 }
 const userUuidGetter = () => store.userInfo?.ctx.user.uuid
 const sessionValidator = new SessionValidator(userUuidGetter, terminateSession)
 onMounted(() => sessionValidator.start())
 onUnmounted(() => sessionValidator.stop())
 async function loadUserInfo() {
  try {
    store.userInfo = await apiJson('/auth/api/user-info', { method: 'POST' })
    viewState.value = 'profile'
    return true
  } catch {
    store.userInfo = null
    return false
  }
 }
 async function showAuthIframe() {
  const url = await getAuthIframeUrl('login')
  createAuthIframe(url)
  loadingMessage.value = 'Authentication required...'
 }
 function handleAuthMessage(event) {
  const data = event.data
  if (!data?.type) return
  switch (data.type) {
    case 'auth-success':
      // Authentication successful - reload user info
      removeAuthIframe()
      viewState.value = 'loading'
      loadingMessage.value = 'Loading user profile...'
      loadUserInfo()
      break
    case 'auth-error':
      // Authentication failed - keep iframe open so user can retry
      if (data.cancelled) {
        console.log('Authentication cancelled by user')
      } else {
        store.showMessage(data.message || 'Authentication failed', 'error', 5000)
      }
      break
    case 'auth-cancelled':
      // Legacy support - treat as auth-error with cancelled flag
      console.log('Authentication cancelled')
      break
    case 'auth-back':
      // User clicked Back - show terminal state
      removeAuthIframe()
      terminateSession()
      break
    case 'auth-close-request':
      // Legacy support - treat as back
      removeAuthIframe()
      break
  }
 }
 onMounted(async () => {
  // Listen for postMessage from auth iframe
  window.addEventListener('message', handleAuthMessage)
  // 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
  }
  // Try to load user info
  const success = await loadUserInfo()
  if (!success) {
    // Need authentication - show login iframe
    showAuthIframe()
  }
 })
 onUnmounted(() => {
  window.removeEventListener('message', handleAuthMessage)
  removeAuthIframe()
 })
 </script>
 <style scoped>
 </style>
@@ -0,0 +1,815 @@
 <script setup>
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import CredentialList from '@/components/CredentialList.vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
 import StatusMessage from '@/components/StatusMessage.vue'
 import LoadingView from '@/components/LoadingView.vue'
 import AccessDenied from '@/components/AccessDenied.vue'
 import AdminOverview from '@/admin/AdminOverview.vue'
 import AdminOrgDetail from '@/admin/AdminOrgDetail.vue'
 import AdminUserDetail from '@/admin/AdminUserDetail.vue'
 import AdminDialogs from '@/admin/AdminDialogs.vue'
 import { useAuthStore } from '@/stores/auth'
 import { adminUiPath, makeUiHref } from '@/utils/settings'
 import { apiJson, SessionValidator } from 'paskia'
 import { getDirection } from '@/utils/keynav'
 import { goBack } from '@/utils/helpers'
 const info = ref(null)
 const loading = ref(true)
 const loadingMessage = ref('Loading...')
 const authenticated = ref(false)
 const showBackMessage = ref(false)
 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 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 dialogPreviousFocus = ref(null)  // Track element that had focus before dialog opened
 const safeIdRegex = /[^A-Za-z0-9:._~-]/g
 // Template refs for navigation
 const breadcrumbsRef = ref(null)
 const adminOverviewRef = ref(null)
 const adminOrgDetailRef = ref(null)
 const adminUserDetailRef = ref(null)
 // Check if any modal/dialog is open (blocks arrow key navigation)
 const hasActiveModal = computed(() => dialog.value.type !== null || showRegModal.value)
 // Derive admin status from permissions
 const isMasterAdmin = computed(() => info.value?.ctx.permissions.includes('auth:admin'))
 const isOrgAdmin = computed(() => info.value?.ctx.permissions.includes('auth:org:admin'))
 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(async () => {
  document.addEventListener('click', handleGlobalClick)
  window.addEventListener('hashchange', parseHash)
  await authStore.loadSettings()
  if (authStore.settings?.rp_name) document.title = authStore.settings.rp_name + ' Admin'
  await load()
 })
 onUnmounted(() => {
  document.removeEventListener('click', handleGlobalClick)
  window.removeEventListener('hashchange', parseHash)
 })
 // 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, scope: p.scope, display_name: p.display_name, domain: p.domain || '' }) }
 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 data = await apiJson('/auth/api/admin/orgs')
  orgs.value = data.map(o => {
    const roles = o.roles.map(r => ({ ...r, org: 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() {
  permissions.value = await apiJson('/auth/api/admin/permissions')
 }
 async function loadUserInfo() {
  const data = await apiJson('/auth/api/validate', { method: 'POST' })
  info.value = data
  authenticated.value = true
 }
 function clearSensitiveState() {
  info.value = null
  orgs.value = []
  permissions.value = []
  userDetail.value = null
  authenticated.value = false
 }
 function onSessionLost(e) {
  clearSensitiveState()
  if (e.name === 'AuthCancelledError') {
    showBackMessage.value = true
  } else {
    error.value = e.message
  }
 }
 const userUuidGetter = () => info.value?.ctx.user.uuid
 const sessionValidator = new SessionValidator(userUuidGetter, onSessionLost)
 onMounted(() => sessionValidator.start())
 onUnmounted(() => sessionValidator.stop())
 async function load() {
  loading.value = true
  loadingMessage.value = 'Loading...'
  error.value = null
  try {
    // Load admin data first - apiJson will handle 401/403 with iframe authentication
    await Promise.all([loadOrgs(), loadPermissions()])
    // If we get here, user has admin access - now fetch user info for display
    await loadUserInfo()
    if (!isMasterAdmin.value && isOrgAdmin.value && 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) {
    onSessionLost(e)
  } 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 }) }
 async function performOrgDeletion(orgUuid) {
  await apiJson(`/auth/api/admin/orgs/${orgUuid}`, { method: 'DELETE' })
  await Promise.all([loadOrgs(), loadPermissions()])
 }
 function deleteOrg(org) {
  const userCount = org.roles.reduce((acc, r) => acc + r.users.length, 0)
  if (userCount === 0) {
    // No users in the organization, safe to delete directly
    performOrgDeletion(org.uuid)
      .then(() => {
        authStore.showMessage(`Organization "${org.display_name}" deleted.`, 'success', 2500)
      })
      .catch(e => {
        authStore.showMessage(e.message || 'Failed to delete organization', 'error')
      })
    return
  }
  // Build detailed breakdown of users by role
  const roleParts = org.roles
    .filter(r => r.users.length > 0)
    .map(r => `${r.users.length} ${r.display_name}`)
  const affects = roleParts.join(', ')
  openDialog('confirm', { message: `Delete organization "${org.display_name}", including accounts of ${affects})?`, action: async () => {
    await performOrgDeletion(org.uuid)
  } })
 }
 function createUserInRole(org, role) { openDialog('user-create', { org, role }) }
 async function moveUserToRole(org, user, targetRoleDisplayName) {
  if (user.role === targetRoleDisplayName) return
  try {
    await apiJson(`/auth/api/admin/orgs/${org.uuid}/users/${user.uuid}/role`, {
      method: 'PATCH',
      body: { role: targetRoleDisplayName }
    })
    await loadOrgs()
  } catch (e) {
    authStore.showMessage(e.message || 'Failed to update user role')
  }
 }
 function onUserDragStart(e, user, org) {
  e.dataTransfer.effectAllowed = 'move'
  e.dataTransfer.setData('text/plain', JSON.stringify({ user_uuid: user.uuid, org }))
 }
 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 !== 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 */ }
 }
 // Role actions
 function createRole(org) { openDialog('role-create', { org }) }
 function updateRole(role) { openDialog('role-update', { role, name: role.display_name }) }
 function deleteRole(role) {
  // UI only allows deleting empty roles, so no confirmation needed
  apiJson(`/auth/api/admin/orgs/${role.org}/roles/${role.uuid}`, { method: 'DELETE' })
    .then(() => {
      authStore.showMessage(`Role "${role.display_name}" deleted.`, 'success', 2500)
      loadOrgs()
    })
    .catch(e => {
      authStore.showMessage(e.message || 'Failed to delete role', 'error')
    })
 }
 async function toggleRolePermission(role, pid, checked) {
  // Optimistic update
  const prevPermissions = [...role.permissions]
  const newPermissions = checked
    ? [...role.permissions, pid]
    : role.permissions.filter(p => p !== pid)
  role.permissions = newPermissions
  try {
    const method = checked ? 'POST' : 'DELETE'
    await apiJson(`/auth/api/admin/orgs/${role.org}/roles/${role.uuid}/permissions/${pid}`, {
      method
    })
    await loadOrgs()
  } catch (e) {
    authStore.showMessage(e.message || 'Failed to update role permission')
    role.permissions = prevPermissions // revert
  }
 }
 // Permission actions
 async function performPermissionDeletion(permissionUuid) {
  const params = new URLSearchParams({ permission_uuid: permissionUuid })
  await apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'DELETE' })
  await loadPermissions()
 }
 function deletePermission(p) {
  const userCount = permissionSummary.value[p.uuid]?.userCount || 0
  // Count roles that have this permission
  let roleCount = 0
  for (const org of orgs.value) {
    for (const role of org.roles) {
      if (role.permissions.includes(p.uuid)) {
        roleCount++
      }
    }
  }
  if (roleCount === 0) {
    // No roles have this permission, safe to delete directly
    performPermissionDeletion(p.uuid)
      .then(() => {
        authStore.showMessage(`Permission "${p.display_name}" deleted.`, 'success', 2500)
      })
      .catch(e => {
        authStore.showMessage(e.message || 'Failed to delete permission', 'error')
      })
    return
  }
  const parts = []
  if (roleCount > 0) parts.push(`${roleCount} role${roleCount !== 1 ? 's' : ''}`)
  if (userCount > 0) parts.push(`${userCount} user${userCount !== 1 ? 's' : ''}`)
  const affects = parts.join(', ')
  openDialog('confirm', { message: `Delete permission "${p.display_name}" (${affects})?`, action: async () => {
    await performPermissionDeletion(p.uuid)
  } })
 }
 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: 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: makeUiHref() },
    { label: 'Admin', href: adminUiPath() }
  ]
  // 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) || 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, href: `#user/${selectedUser.value.uuid}` })
  }
  return entries
 })
 watch(selectedUser, async (u) => {
  if (!u) { userDetail.value = null; return }
  try {
    userDetail.value = await apiJson(`/auth/api/admin/orgs/${u.org}/users/${u.uuid}`)
  } catch (e) {
    userDetail.value = { error: e.message }
  }
 })
 const showRegModal = ref(false)
 function generateUserRegistrationLink(u) {
  showRegModal.value = true
 }
 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_uuid: permId })
    await apiJson(`/auth/api/admin/orgs/${org.uuid}/permission?${params.toString()}`, { method: checked ? 'POST' : 'DELETE' })
    await loadOrgs()
  } catch (e) {
    authStore.showMessage(e.message || 'Failed to update organization permission', 'error')
    org.permissions = prev // revert
  }
 }
 function openDialog(type, data) {
  const focused = document.activeElement
  dialogPreviousFocus.value = focused
  // For delete operations, store sibling info to help restore focus after deletion
  if (type === 'confirm' && focused) {
    const row = focused.closest('tr')
    if (row) {
      const tbody = row.closest('tbody')
      if (tbody) {
        const rows = Array.from(tbody.querySelectorAll('tr'))
        const idx = rows.indexOf(row)
        // Store context to find next/prev row after deletion
        dialog.value.focusContext = {
          tbody,
          index: idx,
          total: rows.length,
          selector: 'button:not([disabled]), a'
        }
      }
    }
  }
  dialog.value = { ...dialog.value, type, data, busy: false, error: '' }
 }
 function closeDialog() {
  const prev = dialogPreviousFocus.value
  const context = dialog.value.focusContext
  dialog.value = { type: null, data: null, busy: false, error: '' }
  // Restore focus after dialog closes
  restoreFocusAfterDialog(prev, context)
  dialogPreviousFocus.value = null
 }
 /**
 * Restore focus to the previously focused element, or find a sibling if deleted.
 */
 function restoreFocusAfterDialog(prev, context) {
  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
  }
  // Element was deleted - try to find a sibling using stored context
  if (context?.tbody && context.selector) {
    const rows = Array.from(context.tbody.querySelectorAll('tr'))
    if (rows.length > 0) {
      // Try the same index (next row moved up) or the last row
      const targetIdx = Math.min(context.index, rows.length - 1)
      const targetRow = rows[targetIdx]
      const focusable = targetRow?.querySelector(context.selector)
      if (focusable) {
        focusable.focus()
        return
      }
    }
  }
  // Fallback: try to find any focusable element in the admin panels
  const container = document.querySelector('.admin-panels')
  if (!container) return
  const focusable = container.querySelector('button:not([disabled]), a, input:not([disabled]), [tabindex="0"]')
  if (focusable) {
    focusable.focus()
  }
 }
 // Keyboard navigation handlers
 function handleBreadcrumbKeydown(event) {
  if (hasActiveModal.value) return
  const direction = getDirection(event)
  if (!direction) return
  // Left/right handled internally by Breadcrumbs component
  if (direction === 'down') {
    event.preventDefault()
    // Move to admin panel content
    if (adminOverviewRef.value) {
      adminOverviewRef.value.focusFirstElement?.()
    } else if (adminOrgDetailRef.value) {
      adminOrgDetailRef.value.focusFirstElement?.()
    } else if (adminUserDetailRef.value) {
      adminUserDetailRef.value.focusFirstElement?.()
    }
  }
 }
 function handlePanelNavigateOut(direction) {
  if (hasActiveModal.value) return
  if (direction === 'up') {
    // Focus breadcrumbs - focus the current page's crumb
    breadcrumbsRef.value?.focusCurrent?.()
  }
 }
 async function refreshUserDetail() {
  await loadOrgs()
  if (selectedUser.value) {
    try {
      userDetail.value = await apiJson(`/auth/api/admin/orgs/${selectedUser.value.org}/users/${selectedUser.value.uuid}`)
    } catch (e) { authStore.showMessage(e.message || 'Failed to reload user', 'error') }
  }
 }
 async function onUserNameSaved() {
  await refreshUserDetail()
  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')
      // Close dialog immediately, then perform async operation
      closeDialog()
      apiJson('/auth/api/admin/orgs', { method: 'POST', body: { display_name: name, permissions: [] } })
        .then(() => {
          authStore.showMessage(`Organization "${name}" created.`, 'success', 2500)
          Promise.all([loadOrgs(), loadPermissions()])
        })
        .catch(e => {
          authStore.showMessage(e.message || 'Failed to create organization', 'error')
        })
      return // Don't call closeDialog() again
    } else if (t === 'org-update') {
      const { org } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
      // Close dialog immediately, then perform async operation
      closeDialog()
      apiJson(`/auth/api/admin/orgs/${org.uuid}`, { method: 'PATCH', body: { display_name: name } })
        .then(() => {
          authStore.showMessage(`Organization renamed to "${name}".`, 'success', 2500)
          loadOrgs()
        })
        .catch(e => {
          authStore.showMessage(e.message || 'Failed to update organization', 'error')
        })
      return // Don't call closeDialog() again
    } else if (t === 'role-create') {
      const { org } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
      // Close dialog immediately, then perform async operation
      closeDialog()
      apiJson(`/auth/api/admin/orgs/${org.uuid}/roles`, { method: 'POST', body: { display_name: name, permissions: [] } })
        .then(() => {
          authStore.showMessage(`Role "${name}" created.`, 'success', 2500)
          loadOrgs()
        })
        .catch(e => {
          authStore.showMessage(e.message || 'Failed to create role', 'error')
        })
      return // Don't call closeDialog() again
    } else if (t === 'role-update') {
      const { role } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
      // Close dialog immediately, then perform async operation
      closeDialog()
      apiJson(`/auth/api/admin/orgs/${role.org}/roles/${role.uuid}`, { method: 'PATCH', body: { display_name: name } })
        .then(() => {
          authStore.showMessage(`Role renamed to "${name}".`, 'success', 2500)
          loadOrgs()
        })
        .catch(e => {
          authStore.showMessage(e.message || 'Failed to update role', 'error')
        })
      return // Don't call closeDialog() again
    } 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')
      // Close dialog immediately, then perform async operation
      closeDialog()
      apiJson(`/auth/api/admin/orgs/${org.uuid}/users`, { method: 'POST', body: { display_name: name, role: role.display_name } })
        .then(() => {
          authStore.showMessage(`User "${name}" added to ${role.display_name} role.`, 'success', 2500)
          loadOrgs()
        })
        .catch(e => {
          authStore.showMessage(e.message || 'Failed to add user', 'error')
        })
      return // Don't call closeDialog() again
    } 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')
      // Close dialog immediately, then perform async operation
      closeDialog()
      apiJson(`/auth/api/admin/orgs/${user.org}/users/${user.uuid}/display-name`, { method: 'PATCH', body: { display_name: name } })
        .then(() => {
          authStore.showMessage(`User renamed to "${name}".`, 'success', 2500)
          onUserNameSaved()
        })
        .catch(e => {
          authStore.showMessage(e.message || 'Failed to update user name', 'error')
        })
      return // Don't call closeDialog() again
    } else if (t === 'perm-display') {
      const { permission } = dialog.value.data
      const newScope = dialog.value.data.scope?.trim()
      const newDisplay = dialog.value.data.display_name?.trim()
      const newDomain = dialog.value.data.domain?.trim() || ''
      if (!newDisplay) throw new Error('Display name required')
      if (!newScope) throw new Error('Scope required')
      // Close dialog immediately, then perform async operation
      closeDialog()
      const oldDomain = permission.domain || ''
      // Check if anything changed
      if (newScope === permission.scope && newDisplay === permission.display_name && newDomain === oldDomain) {
        return // No changes
      }
      // Always use PATCH with permission_uuid
      const params = new URLSearchParams({ permission_uuid: permission.uuid })
      if (newScope !== permission.scope) params.set('scope', newScope)
      if (newDisplay !== permission.display_name) params.set('display_name', newDisplay)
      if (newDomain !== oldDomain) params.set('domain', newDomain || '')
      apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'PATCH' })
        .then(() => {
          authStore.showMessage(`Permission "${newDisplay}" updated.`, 'success', 2500)
          loadPermissions()
        })
        .catch(e => {
          authStore.showMessage(e.message || 'Failed to update permission', 'error')
        })
      return // Don't call closeDialog() again
    } else if (t === 'perm-create') {
      const scope = dialog.value.data.scope?.trim(); if (!scope) throw new Error('Scope required')
      const display_name = dialog.value.data.display_name?.trim(); if (!display_name) throw new Error('Display name required')
      const domain = dialog.value.data.domain?.trim() || ''
      // Close dialog immediately, then perform async operation
      closeDialog()
      apiJson('/auth/api/admin/permissions', { method: 'POST', body: { scope, display_name, domain: domain || undefined } })
        .then(() => {
          authStore.showMessage(`Permission "${display_name}" created.`, 'success', 2500)
          loadPermissions()
        })
        .catch(e => {
          authStore.showMessage(e.message || 'Failed to create permission', 'error')
        })
      return // Don't call closeDialog() again
    } else if (t === 'confirm') {
      const action = dialog.value.data.action
      // Close dialog first, then perform action (errors shown via showMessage)
      closeDialog()
      if (action) {
        try {
          await action()
        } catch (e) {
          authStore.showMessage(e.message || 'Action failed', 'error')
        }
      }
      return // Already closed
    }
    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">
      <LoadingView v-if="loading" :message="loadingMessage" />
      <AccessDenied v-else-if="showBackMessage" />
      <AccessDenied
        v-else-if="error"
        icon="⚠️"
        title="Error"
        :message="error"
      />
      <AccessDenied
        v-else-if="authenticated && !isMasterAdmin && !isOrgAdmin"
        icon="⛔"
        message="You do not have admin permissions for this application."
      />
      <section v-else-if="authenticated && (isMasterAdmin || isOrgAdmin)" class="view-root view-root--wide view-admin">
        <header class="view-header">
          <h1>{{ pageHeading }}</h1>
          <Breadcrumbs ref="breadcrumbsRef" :entries="breadcrumbEntries" @keydown="handleBreadcrumbKeydown" />
        </header>
        <section class="section-block admin-section">
          <div class="section-body admin-section-body">
            <div class="admin-panels">
                                  <AdminOverview
                  v-if="!selectedUser && !selectedOrg && (isMasterAdmin || isOrgAdmin)"
                  ref="adminOverviewRef"
                  :info="info"
                  :orgs="orgs"
                  :permissions="permissions"
                  :navigation-disabled="hasActiveModal"
                  :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"
                  @navigate-out="handlePanelNavigateOut"
                />
                <AdminUserDetail
                  v-else-if="selectedUser"
                  ref="adminUserDetailRef"
                  :selected-user="selectedUser"
                  :user-detail="userDetail"
                  :selected-org="selectedOrg"
                  :loading="loading"
                  :show-reg-modal="showRegModal"
                  :navigation-disabled="hasActiveModal"
                  @generate-user-registration-link="generateUserRegistrationLink"
                  @go-overview="goOverview"
                  @open-org="openOrg"
                  @on-user-name-saved="onUserNameSaved"
                  @refresh-user-detail="refreshUserDetail"
                  @edit-user-name="editUserName"
                  @close-reg-modal="showRegModal = false"
                  @navigate-out="handlePanelNavigateOut"
                />
                <AdminOrgDetail
                  v-else-if="selectedOrg"
                  ref="adminOrgDetailRef"
                  :selected-org="selectedOrg"
                  :permissions="permissions"
                  :navigation-disabled="hasActiveModal"
                  @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"
                  @navigate-out="handlePanelNavigateOut"
                  @on-role-drop="onRoleDrop"
                  @on-user-drag-start="onUserDragStart"
                />
              </div>
          </div>
        </section>
      </section>
    </main>
    <AdminDialogs
      :dialog="dialog"
      :permission-id-pattern="PERMISSION_ID_PATTERN"
      :settings="authStore.settings"
      @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>
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -7,6 +7,6 @@
  </head>
  <body>
    <div id="admin-app"></div>
-    <script type="module" src="/src/admin/main.js"></script>
+    <script type="module" src="/auth/admin/main.js"></script>
  </body>
  </html>
@@ -1,9 +1,14 @@
-import '../assets/style.css'
+import { initThemeFromCache } from '@/utils/theme'
 initThemeFromCache()
 import '@/assets/style.css'
 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()
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,6 +7,6 @@
  </head>
  <body>
    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/auth/main.js"></script>
  </body>
 </html>
@@ -0,0 +1,16 @@
 import { initThemeFromCache } from '@/utils/theme'
 initThemeFromCache()
 import '@/assets/style.css'
 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()
@@ -0,0 +1,71 @@
 <template>
  <RestrictedAuth
    :mode="authMode"
    :remote-auth-token="remoteAuthToken"
    @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)
 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))
 const 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) {
  postToParent({
    type: 'auth-success',
    authenticated: true,
    sessionToken: result.session_token
  })
 }
 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>
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="background: transparent">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Account Summary</title>
  </head>
  <body>
    <div id="app"></div>
-    <script type="module" src="/src/host/main.js"></script>
+    <script type="module" src="/auth/restricted/main.js"></script>
  </body>
 </html>
@@ -0,0 +1,8 @@
 import './theme.js'
 import { createApp } from 'vue'
 import RestrictedApi from './RestrictedApi.vue'
 import '@/assets/style.css'
 import { initKeyboardNavigation } from '@/utils/keynav'
 createApp(RestrictedApi).mount('#app')
 initKeyboardNavigation()
@@ -0,0 +1,11 @@
 // Early theme for restricted app - first URL param wins, then localStorage
 import { themeColors, applyTheme, getCachedTheme } from '@/utils/theme.js'
 function getTheme() {
  const params = new URLSearchParams(location.hash.slice(1))
  return params.get('theme') || getCachedTheme() || ''
 }
 // Use .surface selector to preserve transparent background
 applyTheme(getTheme(), '.surface')
 addEventListener('hashchange', () => applyTheme(getTheme(), '.surface'))
@@ -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>
@@ -7,6 +7,6 @@
  </head>
  <body>
    <div id="app"></div>
-    <script type="module" src="/src/restricted/main.js"></script>
+    <script type="module" src="/int/forward/main.js"></script>
  </body>
 </html>
@@ -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()
@@ -7,7 +7,6 @@
    </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>🔑 Registration</h1>
@@ -24,7 +23,6 @@
        <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>
@@ -53,7 +51,6 @@
          </div>
        </section>
      </div>
      </div>
    </main>
  </div>
 </template>
@@ -62,6 +59,7 @@
 import { computed, onMounted, reactive, ref } from 'vue'
 import passkey from '@/utils/passkey'
 import { getSettings, uiBasePath } from '@/utils/settings'
 import { apiJson, ApiError, getUserFriendlyErrorMessage } from 'paskia'
 const status = reactive({
  show: false,
@@ -73,21 +71,21 @@ const initializing = ref(true)
 const loading = ref(false)
 const token = ref('')
 const settings = ref(null)
-const userInfo = ref(null)
+const tokenInfo = ref(null)
 const displayName = ref('')
 const errorMessage = ref('')
 let statusTimer = null
-const sessionDescriptor = computed(() => userInfo.value?.session_type || 'your enrollment')
+const sessionDescriptor = computed(() => tokenInfo.value?.token_type || 'your enrollment')
 const subtitleMessage = computed(() => {
  if (initializing.value) return 'Preparing your secure enrollment…'
-  if (!canRegister.value) return 'This reset link is no longer valid.'
+  if (!canRegister.value) return 'This authentication link is no longer valid.'
  return `Finish up ${sessionDescriptor.value}. You may edit the name below if needed, and it will be saved to your passkey.`
 })
 const basePath = computed(() => uiBasePath())
-const canRegister = computed(() => !!(token.value && userInfo.value))
+const canRegister = computed(() => !!(token.value && tokenInfo.value))
 function showMessage(message, type = 'info', duration = 3000) {
  status.show = true
@@ -111,26 +109,20 @@ async function fetchSettings() {
  }
 }
-async function fetchUserInfo() {
+async function fetchTokenInfo() {
  if (!token.value) return
  try {
-    const res = await fetch(`/auth/api/user-info?reset=${encodeURIComponent(token.value)}`, {
+    tokenInfo.value = await apiJson('/auth/api/token-info', {
-      method: 'POST'
+      method: 'GET',
      headers: { 'Authorization': `Bearer ${token.value}` },
    })
-    if (!res.ok) {
+    displayName.value = tokenInfo.value.display_name
      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()
    displayName.value = userInfo.value?.user?.user_name || ''
  } catch (error) {
-    console.error('Failed to load user info', error)
+    console.error('Failed to load token info', error)
-    const message = 'We could not load your reset details. Try refreshing the page.'
+    const message = error instanceof ApiError
      ? (error.data?.detail || 'The authentication link is invalid or expired.')
      : getUserFriendlyErrorMessage(error)
    errorMessage.value = message
    showMessage(message, 'error', 0)
  }
 }
@@ -152,7 +144,7 @@ async function registerPasskey() {
  }
  try {
-    await setSessionCookie(result.session_token)
+    await setSessionCookie(result)
  } catch (error) {
    loading.value = false
    const message = error?.message || 'Failed to establish session'
@@ -160,29 +152,23 @@ async function registerPasskey() {
    return
  }
-  showMessage('Passkey registered successfully!', 'success', 2000)
+  showMessage('Passkey registered successfully!', 'success', 800)
-  setTimeout(() => {
+  setTimeout(() => { loading.value = false; goHome() }, 800)
    loading.value = false
    redirectHome()
  }, 800)
 }
-async function setSessionCookie(sessionToken) {
+async function setSessionCookie(result) {
-  const response = await fetch('/auth/api/set-session', {
+  if (!result?.session_token) {
    throw new Error('Registration response missing session_token')
  }
  return await apiJson('/auth/api/set-session', {
    method: 'POST',
    headers: {
-      Authorization: `Bearer ${sessionToken}`
+      Authorization: `Bearer ${result.session_token}`
    }
  })
  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() {
+function goHome() {
  const target = uiBasePath.value || '/auth/'
  if (window.location.pathname !== target) {
    history.replaceState(null, '', target)
@@ -190,10 +176,6 @@ function redirectHome() {
  window.location.reload()
 }
 function goHome() {
  redirectHome()
 }
 function extractTokenFromPath() {
  const segments = window.location.pathname.split('/').filter(Boolean)
  if (!segments.length) return ''
@@ -205,14 +187,6 @@ function extractTokenFromPath() {
  return candidate
 }
 async function safeParseJson(response) {
  try {
    return await response.json()
  } catch (error) {
    return null
  }
 }
 onMounted(async () => {
  token.value = extractTokenFromPath()
  await fetchSettings()
@@ -223,7 +197,7 @@ onMounted(async () => {
    initializing.value = false
    return
  }
-  await fetchUserInfo()
+  await fetchTokenInfo()
  initializing.value = false
 })
 </script>
@@ -7,6 +7,6 @@
  </head>
  <body>
    <div id="app"></div>
-    <script type="module" src="/src/reset/main.js"></script>
+    <script type="module" src="/int/reset/main.js"></script>
  </body>
 </html>
@@ -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()
@@ -10,8 +10,10 @@
  },
  "dependencies": {
    "@simplewebauthn/browser": "^13.1.2",
    "paskia": "file:../paskia-js",
    "pinia": "^3.0.3",
    "qrcode": "^1.5.4",
    "sirv": "^3.0.2",
    "vue": "^3.5.17"
  },
  "devDependencies": {
@@ -1,35 +0,0 @@
 <template>
  <div class="app-shell">
    <StatusMessage />
    <main class="app-main">
      <ProfileView v-if="initialized" />
      <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 ProfileView from '@/components/ProfileView.vue'
 const store = useAuthStore()
 const initialized = ref(false)
 onMounted(async () => {
  await store.loadSettings()
  if (store.settings?.rp_name) document.title = store.settings.rp_name
  try { await store.loadUserInfo() } catch (_) { /* user info load errors ignored */ }
  initialized.value = true
 })
 </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>
@@ -1,574 +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'
 import { getSettings, adminUiPath, makeUiHref } from '@/utils/settings'
 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)
  const settings = await getSettings()
  if (settings?.rp_name) document.title = 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: makeUiHref() },
    { label: 'Admin', href: adminUiPath() }
  ]
  // 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>
@@ -1,34 +1,18 @@
 <script setup>
-import { ref, watch, nextTick } from 'vue'
+import { computed } from 'vue'
 import Modal from '@/components/Modal.vue'
 import NameEditForm from '@/components/NameEditForm.vue'
 const props = defineProps({
  dialog: Object,
-  PERMISSION_ID_PATTERN: String
+  PERMISSION_ID_PATTERN: String,
  settings: Object
 })
 const emit = defineEmits(['submitDialog', 'closeDialog'])
 const nameInput = ref(null)
 const displayNameInput = ref(null)
 const NAME_EDIT_TYPES = new Set(['org-update', 'role-update', 'user-update-name'])
-
+const rpId = computed(() => props.settings?.rp_id || 'the configured domain')
 watch(() => props.dialog.type, (newType) => {
  if (newType === 'org-create') {
    nextTick(() => {
      nameInput.value?.focus()
    })
  } else if (newType === 'perm-display' || newType === 'perm-create') {
    nextTick(() => {
      displayNameInput.value?.focus()
      if (newType === 'perm-display') {
        displayNameInput.value?.select()
      }
    })
  }
 })
 </script>
 <template>
@@ -40,7 +24,7 @@ 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==='confirm'">Confirm</template>
      </h3>
      <form @submit.prevent="$emit('submitDialog')" class="modal-form">
@@ -91,10 +75,14 @@ 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" :placeholder="dialog.type === 'perm-create' ? 'yourapp:permission' : dialog.data.permission.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" placeholder="e.g. app.example.com" data-form-type="other" />
          </label>
          <p class="small muted">If set, this permission is effective only on the specified domain, which can be {{ rpId }} or its subdomain.</p>
        </template>
        <template v-else-if="dialog.type==='confirm'">
          <p>{{ dialog.data.message }}</p>
@@ -125,4 +113,5 @@ watch(() => props.dialog.type, (newType) => {
 .error { color: var(--color-danger-text); }
 .small { font-size: 0.9rem; }
 .muted { color: var(--color-text-muted); }
 .optional { font-weight: normal; color: var(--color-text-muted); font-size: 0.85em; }
 </style>
@@ -1,12 +1,19 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { getDirection, navigateButtonRow, focusPreferred } from '@/utils/keynav'
 const props = defineProps({
  selectedOrg: Object,
-  permissions: Array
+  permissions: Array,
  navigationDisabled: { type: Boolean, default: false }
 })
-const emit = defineEmits(['updateOrg', 'createRole', 'updateRole', 'deleteRole', 'createUserInRole', 'openUser', 'toggleRolePermission', 'onRoleDragOver', 'onRoleDrop', 'onUserDragStart'])
+const emit = defineEmits(['updateOrg', 'createRole', 'updateRole', 'deleteRole', 'createUserInRole', 'openUser', 'toggleRolePermission', 'onRoleDragOver', 'onRoleDrop', 'onUserDragStart', '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) => {
@@ -19,22 +26,272 @@ 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(() => {
  const uuidSet = new Set(props.selectedOrg.permissions || [])
  return props.permissions.filter(p => uuidSet.has(p.uuid))
 })
 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 = 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 = 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>
    <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 +306,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="r.permissions.includes(p.uuid)"
-                @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,15 +327,15 @@ 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>
@@ -88,7 +345,7 @@ function toggleRolePermission(role, pid, checked) {
          </div>
        </div>
        <template v-if="r.users.length > 0">
-          <ul class="user-list">
+          <ul class="user-list" @keydown="handleUserListKeydown">
            <li
              v-for="u in r.users.slice().sort((a, b) => {
                const nameA = a.display_name.toLowerCase()
@@ -100,9 +357,11 @@ function toggleRolePermission(role, pid, checked) {
              })"
              :key="u.uuid"
              class="user-chip"
              tabindex="0"
              draggable="true"
              @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>
@@ -110,7 +369,7 @@ function toggleRolePermission(role, pid, checked) {
            </li>
          </ul>
        </template>
-        <div v-else class="empty-role">
+        <div v-else class="empty-role" @keydown="e => handleEmptyRoleKeydown(e, roleIndex)">
          <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>
@@ -144,6 +403,7 @@ function toggleRolePermission(role, pid, checked) {
 .plus-btn:hover { background: rgba(37, 99, 235, 0.18); }
 .user-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
 .user-chip { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.45rem 0.6rem; display: flex; justify-content: space-between; gap: var(--space-sm); cursor: grab; }
 .user-chip:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
 .user-chip .meta { font-size: 0.7rem; color: var(--color-text-muted); }
 .empty-role { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }
 .empty-text { margin: 0; }
@@ -1,23 +1,37 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { getDirection, navigateButtonRow, focusPreferred, focusAtIndex } from '@/utils/keynav'
 const props = defineProps({
  info: Object,
  orgs: Array,
  permissions: Array,
-  permissionSummary: Object
+  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', '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 sortedOrgs = computed(() => [...props.orgs].sort((a,b)=> {
  const nameCompare = a.display_name.localeCompare(b.display_name)
  return nameCompare !== 0 ? nameCompare : a.uuid.localeCompare(b.uuid)
 }))
-const sortedPermissions = computed(() => [...props.permissions].sort((a,b)=> a.id.localeCompare(b.id)))
+const sortedPermissions = computed(() => [...props.permissions].sort((a,b)=> a.scope.localeCompare(b.scope)))
-function permissionDisplayName(id) {
+// Derive admin status from permissions (info contains ctx from validate response)
-  return props.permissions.find(p => p.id === id)?.display_name || id
+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) {
@@ -27,32 +41,236 @@ function getRoleNames(org) {
    .map(r => r.display_name)
    .join(', ')
 }
 // 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>
-            <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 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 +278,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"
@@ -78,19 +296,19 @@ function getRoleNames(org) {
            <span>{{ o.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="o.permissions.includes(p.uuid)"
-                @change="e => $emit('toggleOrgPermission', o, p.id, e.target.checked)"
+                @change="e => $emit('toggleOrgPermission', o, p.uuid, e.target.checked)"
              />
            </div>
          </template>
@@ -98,29 +316,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">{{ 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>
@@ -141,7 +361,8 @@ function getRoleNames(org) {
 .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; }
 .perm-domain { color: var(--color-text-muted); 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-muted); }
 .delete-icon { color: var(--color-danger); }
@@ -1,48 +1,179 @@
 <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'])
 const authStore = useAuthStore()
 const terminatingSessions = ref({})
 const hoveredCredentialUuid = ref(null)
 const hoveredSession = ref(null)
 // 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/orgs/${props.selectedUser.org}/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 sessionId = session?.id
  if (!sessionId) return
  terminatingSessions.value = { ...terminatingSessions.value, [sessionId]: true }
  try {
    const data = await apiJson(`/auth/api/admin/orgs/${props.selectedUser.org}/users/${props.selectedUser.uuid}/sessions/${sessionId}`, { 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[sessionId]
    terminatingSessions.value = next
  }
 }
 // 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"
@@ -52,13 +183,14 @@ function handleDelete(credential) {
        :loading="loading"
        :org-display-name="userDetail.org.display_name"
        :role-name="userDetail.role"
-      :update-endpoint="`/auth/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/display-name`"
+        :update-endpoint="`/auth/api/admin/orgs/${selectedUser.org}/users/${selectedUser.uuid}/display-name`"
        @saved="$emit('onUserNameSaved')"
        @edit-name="handleEditName"
      />
-    <div v-else-if="userDetail?.error" class="error small">{{ userDetail.error }}</div>
+    </div>
    <div v-if="userDetail?.error" class="error small">{{ userDetail.error }}</div>
    <template v-if="userDetail && !userDetail.error">
-      <div class="registration-actions">
+      <div class="registration-actions" ref="regActionsRef" @keydown="handleRegActionsKeydown">
        <button
          class="btn-secondary reg-token-btn"
          @click="$emit('generateUserRegistrationLink', selectedUser)"
@@ -75,27 +207,38 @@ function handleDelete(credential) {
        </div>
        <div class="section-body">
          <CredentialList
            ref="credentialListRef"
            :credentials="userDetail.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 || []"
-        :allow-terminate="false"
+        :terminating-sessions="terminatingSessions"
        :hovered-credential-uuid="hoveredCredentialUuid"
        :navigation-disabled="hasActiveModal"
        :empty-message="'This user has no active sessions.'"
-        :section-description="'View the active sessions for this user.'"
+        :section-description="'View and manage the active sessions for this user.'"
        @terminate="handleTerminateSession"
        @session-hover="hoveredSession = $event"
        @navigate-out="handleSessionNavigateOut"
      />
    </template>
-    <div class="actions ancillary-actions">
+    <div class="actions ancillary-actions" ref="backButtonRef" @keydown="handleBackButtonKeydown">
      <button v-if="selectedOrg" @click="$emit('openOrg', selectedOrg)" class="icon-btn" title="Back to Org">↩️</button>
    </div>
    <RegistrationLinkModal
      v-if="showRegModal"
-      :endpoint="`/auth/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/create-link`"
+      :endpoint="`/auth/api/admin/orgs/${selectedUser.org}/users/${selectedUser.uuid}/create-link`"
      :auto-copy="false"
      :user-name="userDetail?.display_name || selectedUser.display_name"
      @close="$emit('closeRegModal')"
      @copied="onLinkCopied"
@@ -1,29 +1,28 @@
 :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: #ffffff;
-  --color-surface: #ffffff;
+  --color-surface: #eff6ff;
-  --color-surface-subtle: #f1f3f7;
+  --color-surface-subtle: #dbeafe;
-  --color-border: #d0d5dd;
+  --color-border: #2563eb;
-  --color-border-strong: #9aa2af;
+  --color-border-strong: #1e40af;
-  --color-heading: #101828;
+  --color-heading: #1e3a8a;
-  --color-text: #1f2933;
+  --color-text: #1e293b;
-  --color-text-muted: #52616b;
+  --color-text-muted: #475569;
-  --color-link: #2563eb;
+  --color-link: #1d4ed8;
-  --color-link-hover: #1d4ed8;
+  --color-link-hover: #1e40af;
  --color-accent: #2563eb;
-  --color-accent-strong: #1e3faa;
+  --color-accent-strong: #1e40af;
  --color-accent-contrast: #ffffff;
-  --color-success-text: #0f5132;
+  --color-success-text: #166534;
-  --color-success-bg: #d1fadf;
+  --color-success-bg: #dcfce7;
-  --color-error-text: #b42318;
+  --color-error-text: #b91c1c;
-  --color-error-bg: #ffe3e3;
+  --color-error-bg: #fee2e2;
-  --color-info-text: #0f609b;
+  --color-info-text: #1e40af;
-  --color-info-bg: #d6ecff;
+  --color-info-bg: #dbeafe;
  --color-danger: #dc2626;
-  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
+  --shadow-soft: 0 10px 30px rgba(30, 64, 175, 0.15);
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
@@ -35,20 +34,19 @@
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;
  --space-xxl: 3.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 {
    color-scheme: dark;
    --color-canvas: #0f172a;
    --color-surface: #141b2f;
    --color-surface-subtle: #1b243b;
    --color-border: #25304a;
    --color-border-strong: #3d4d6b;
-    --color-heading: #f8fafc;
+    --color-heading: #fff;
    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-link: #60a5fa;
@@ -57,13 +55,13 @@
    --color-accent-strong: #3b82f6;
    --color-accent-contrast: #0b1120;
    --color-success-text: #34d399;
-    --color-success-bg: rgba(34, 197, 94, 0.12);
+    --color-success-bg: #1a4d2e;
    --color-error-text: #fca5a5;
-    --color-error-bg: rgba(248, 113, 113, 0.16);
+    --color-error-bg: #4a1f1f;
    --color-info-text: #bae6fd;
-    --color-info-bg: rgba(59, 130, 246, 0.16);
+    --color-info-bg: #1e3a5f;
    --color-danger: #f87171;
-    --shadow-soft: 0 0 0 rgba(0, 0, 0, 0);
+    --shadow-soft: 0 0 0 #000000;
  }
 }
@@ -73,18 +71,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,
@@ -109,13 +115,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 {
@@ -123,7 +122,6 @@ a:focus-visible {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-canvas);
 }
 .app-main {
@@ -133,26 +131,25 @@ 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-header {
  display: flex;
  flex-direction: column;
@@ -190,13 +187,22 @@ 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;
 }
 .button-row button {
  min-width: 0;
 }
 .surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
@@ -217,7 +223,6 @@ 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;
@@ -226,14 +231,9 @@ button {
  color: var(--color-text);
 }
 button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
 }
 button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: opacity(0.6);
 }
 .btn-primary {
@@ -269,6 +269,13 @@ button:disabled {
  filter: brightness(0.92);
 }
 /* Focus-visible outlines for buttons */
 .btn-primary:focus-visible,
 .btn-secondary:focus-visible,
 .btn-danger:focus-visible {
  outline: 1px solid var(-webkit-focus-ring-color);
 }
 input[type="text"],
 input[type="search"],
 input[type="email"],
@@ -284,14 +291,6 @@ select {
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
 }
 input:focus-visible,
 textarea:focus-visible,
 select:focus-visible {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
 }
 label {
  display: flex;
  flex-direction: column;
@@ -351,10 +350,13 @@ th {
 .global-status {
  position: fixed;
  top: 1.5rem;
-  left: 50%;
+  left: 0;
-  transform: translateX(-50%);
+  right: 0;
  margin: 0 auto;
  z-index: 1200;
-  min-width: min(520px, calc(100vw - 2rem));
+  width: fit-content;
  min-width: min(520px, calc(100% - 2rem));
  max-width: calc(100% - 2rem);
  display: none;
 }
@@ -372,28 +374,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;
@@ -424,9 +428,9 @@ th {
 }
 .qr-code {
-  border: 1px solid var(--color-border);
+  padding: 1rem;
-  padding: 0.75rem;
+  background: #fff;
-  background: var(--color-surface);
+  box-shadow: var(--shadow-soft);
 }
 .link-container,
@@ -439,7 +443,7 @@ th {
  color: var(--color-text);
 }
-:root { --card-width: 22rem; }
+:root { --card-width: 16rem; }
 .record-list,
 .credential-list,
@@ -447,18 +451,12 @@ th {
  width: 100%;
  display: grid;
  grid-auto-flow: row;
-  grid-template-columns: repeat(auto-fit, var(--card-width));
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
  justify-content: start;
-  gap: 1rem 1.25rem;
+  gap: 0.5rem;
  align-items: stretch;
  margin: 0 auto;
-  max-width: calc(var(--card-width) * 4 + 3 * 1.25rem);
+  outline: none;
 }
@media (max-width: 1100px) {
  .record-list,
  .credential-list,
  .session-list { max-width: calc(var(--card-width) * 3 + 2 * 1.25rem); }
 }
@media (max-width: 720px) {
@@ -470,14 +468,13 @@ th {
 .session-item {
  display: flex;
  flex-direction: column;
-  gap: 0.75rem;
+  padding: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  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;
 }
 .record-item:hover,
@@ -490,12 +487,22 @@ th {
 .record-item.is-current,
 .credential-item.current-session,
-.session-item.is-current { border-color: var(--color-accent); }
+.credential-item.is-hovered,
 .session-item.is-current,
 .session-item.is-hovered { border-color: var(--color-accent); background-color: var(--color-surface-subtle); }
 .credential-item.is-linked-session,
 .session-item.is-linked-credential { border-color: var(--color-accent); background-color: var(--color-surface-subtle); }
 .credential-item:focus,
 .session-item:focus {
  outline: 1px solid var(-webkit-focus-ring-color);
 }
 .item-top {
  display: flex;
  align-items: center;
-  gap: 1rem;
+  height: 2.5rem;
 }
 .item-icon {
@@ -503,9 +510,6 @@ th {
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--color-surface-subtle, transparent);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
 }
@@ -513,18 +517,22 @@ th {
  border-radius: var(--radius-sm);
 }
 .icon { flex: 0 0 auto; font-size: 1.5em; width: 40px; }
 .item-title {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 .item-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
 }
@@ -532,55 +540,77 @@ th {
 .item-actions .badge + .badge { margin-left: 0.25rem; }
 .item-details {
-  margin-left: calc(40px + 1rem);
+  margin-left: 40px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
 }
 .credential-dates {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 7rem 1fr;
  gap: 0.35rem 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  align-items: center;
 }
 .credential-dates,
 .session-dates {
  display: grid;
  grid-auto-flow: row;
-  grid-template-columns: 7rem 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;
 }
 .btn-card-delete { background: transparent; border: none; color: var(--color-danger); padding: 0.35rem 0.5rem; font-size: 1.05rem; line-height: 1; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
-.btn-card-delete:hover:not(:disabled) { background: rgba(220, 38, 38, 0.08); }
+.btn-card-delete:hover:not(:disabled) { background: #fee; }
-.btn-card-delete:disabled { opacity: 0.4; cursor: not-allowed; }
+.btn-card-delete:disabled { filter: opacity(0.4); cursor: not-allowed; }
 .session-emoji {
  font-size: 1.2rem;
 }
 .session-group {
  position: relative;
 }
 .session-group:focus-visible {
  outline: 1px solid var(-webkit-focus-ring-color);
 }
 .session-group-host {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.5rem 0;
 }
 .session-group-icon {
  margin-left: -1.5rem;
 }
 .session-group-host a {
  color: var(--color-text);
  text-decoration: none;
 }
 .session-group:focus-visible .session-group-host,
 .session-group:focus-visible .session-group-host a {
  color: var(--color-heading);
 }
 .btn-card-delete {
  display: none;
 }
 .session-item:focus .btn-card-delete {
  display: block;
 }
 .badge {
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
 }
 .badge-current {
@@ -613,28 +643,18 @@ th {
 }
 .user-info {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  display: grid;
-  grid-template-columns: auto 1fr;
+  border-radius: var(--radius-md);
-  gap: 0.75rem 1.25rem;
+  background: var(--color-surface);
  padding: 1.1rem 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 {
@@ -653,38 +673,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;
  }
 }
 /* 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(.1rem) brightness(0.7);
  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -704,7 +713,7 @@ th {
  padding: 2rem;
  background: var(--color-surface);
  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);
 }
@@ -721,3 +730,27 @@ th {
    padding: 1.5rem;
  }
 }
 .slot-machine {
  padding: 0.875rem 1rem;
  background: var(--color-surface-hover, rgba(0, 0, 0, 0.03));
  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;
 }
@@ -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>
@@ -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>
@@ -1,12 +1,22 @@
 <template>
-  <div class="credential-list">
+  <div class="credential-list" tabindex="0" @focusin="handleListFocus" @keydown="handleListKeydown">
    <div v-if="loading"><p>Loading credentials...</p></div>
    <div v-else-if="!credentials?.length"><p>No passkeys found.</p></div>
    <template v-else>
      <div
        v-for="credential in credentials"
-        :key="credential.credential_uuid"
+        :key="credential.credential"
-        :class="['credential-item', { 'current-session': credential.is_current_session } ]"
+        :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="item-top">
          <div class="item-icon">
@@ -22,14 +32,17 @@
          </div>
          <h4 class="item-title">{{ getCredentialAuthName(credential) }}</h4>
          <div class="item-actions">
-            <span v-if="credential.is_current_session" class="badge badge-current">Current</span>
+            <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'"
+              :title="credential.is_current_session ? 'Cannot delete current session credential' : 'Delete passkey and terminate any linked sessions.'"
-            >🗑️</button>
+              tabindex="-1"
            >❌</button>
          </div>
        </div>
        <div class="item-details">
@@ -48,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'
@@ -71,3 +152,12 @@ const getCredentialAuthIcon = (credential) => {
  return info[iconKey] || null
 }
 </script>
 <style>
 .btn-card-delete {
  display: none;
 }
 .credential-item:focus .btn-card-delete {
  display: block;
 }
 </style>
@@ -1,73 +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>
      <RegistrationLinkModal
        inline
                :endpoint="'/auth/api/user/create-link'"
        :user-name="userName"
        :auto-copy="false"
        :prefix-copy-with-user-name="!!userName"
        show-close-in-inline
        @copied="onCopied"
      />
      <div class="button-row" style="margin-top:1rem;">
        <button @click="authStore.currentView = 'profile'" class="btn-secondary">Back to Profile</button>
      </div>
    </div>
  </section>
 </template>
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
 const authStore = useAuthStore()
 const userName = ref(null)
 const onCopied = () => {
  authStore.showMessage('Link copied to clipboard!', 'success', 2500)
  authStore.currentView = 'profile'
 }
 onMounted(async () => {
  // Extract optional admin-provided query parameters (?user=Name&emoji=😀)
  const params = new URLSearchParams(location.search)
  const qUser = params.get('user')
  if (qUser) userName.value = qUser.trim()
 })
 </script>
 <style scoped>
 .view-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>
@@ -0,0 +1,136 @@
 <template>
  <section class="view-root 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?.visits || 0"
          :created-at="authStore.userInfo?.created_at"
          :last-seen="authStore.userInfo?.last_seen"
          :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?.ctx || 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>
 <style scoped>
 .host-view { padding: 3rem 1.5rem 4rem; }
 .host-actions { display: flex; flex-direction: column; gap: 0.75rem; }
 .host-actions .button-row { gap: 0.75rem; flex-wrap: wrap; }
 .host-actions .button-row button { flex: 1 1 0; }
 .note { margin: 0; color: var(--color-text-muted); }
 .empty-state { margin: 0; color: var(--color-text-muted); }
 </style>
@@ -0,0 +1,45 @@
 <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: 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>
@@ -1,31 +1,143 @@
 <template>
-  <div class="modal-overlay" @keydown.esc="$emit('close')" tabindex="-1">
+  <dialog ref="dialog" @close="$emit('close')" @keydown="handleDialogKeydown">
    <div class="modal" role="dialog" aria-modal="true">
    <slot />
-    </div>
+  </dialog>
  </div>
 </template>
 <script setup>
 import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import { navigateButtonRow, getDirection, focusPreferred, focusDialogDefault } from '@/utils/keynav'
 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: '' }
 })
 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) => {
  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
  // Show the dialog as a modal
  nextTick(() => {
    if (dialog.value) {
      dialog.value.showModal()
      // 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(() => {
  // Restore focus when modal closes
  restoreFocus()
 })
 </script>
 <style scoped>
-.modal-overlay {
+dialog {
  position: fixed;
  top: 0;
  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);
@@ -35,37 +147,47 @@ defineEmits(['close'])
  width: min(500px, 90vw);
  max-height: 90vh;
  overflow-y: auto;
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
 }
-.modal :deep(.modal-title),
+dialog::backdrop {
-.modal :deep(h3) {
+  background: transparent;
  backdrop-filter: blur(.1rem) brightness(0.7);
  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
 }
 dialog :deep(.modal-title),
 dialog :deep(h3) {
  margin: 0 0 var(--space-md);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-heading);
 }
-.modal :deep(form) {
+dialog :deep(form) {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
 }
-.modal :deep(.modal-form) {
+dialog :deep(.modal-form) {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
 }
-.modal :deep(.modal-form label) {
+dialog :deep(.modal-form label) {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-weight: 500;
 }
-.modal :deep(.modal-form input),
+dialog :deep(.modal-form input),
-.modal :deep(.modal-form textarea) {
+dialog :deep(.modal-form textarea) {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
@@ -76,14 +198,14 @@ defineEmits(['close'])
  min-height: 2.5rem;
 }
-.modal :deep(.modal-form input:focus),
+dialog :deep(.modal-form input:focus),
-.modal :deep(.modal-form textarea:focus) {
+dialog :deep(.modal-form textarea:focus) {
  outline: none;
  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+  box-shadow: 0 0 0 2px #c7d2fe;
 }
-.modal :deep(.modal-actions) {
+dialog :deep(.modal-actions) {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
@@ -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')
@@ -1,51 +1,86 @@
 <template>
  <section class="view-root" data-view="profile">
-    <div class="view-content">
+    <div class="theme-toggle">
      <button class="theme-btn" @click="themeMenuOpen = !themeMenuOpen" :title="themeTitle">
        {{ themeEmoji }}
      </button>
      <div v-if="themeMenuOpen" class="theme-menu" @click="themeMenuOpen = false">
        <button class="theme-option top" :class="{ active: selectedTheme === '' }" @click.stop="setTheme('')" title="Auto">🌓</button>
        <button class="theme-option left" :class="{ active: selectedTheme === 'light' }" @click.stop="setTheme('light')" title="Light">☀️</button>
        <button class="theme-option right" :class="{ active: selectedTheme === 'dark' }" @click.stop="setTheme('dark')" title="Dark">🌙</button>
      </div>
    </div>
    <header class="view-header">
-        <h1>👋 Welcome!</h1>
+      <h1>User Profile</h1>
-        <Breadcrumbs :entries="breadcrumbEntries" />
+      <Breadcrumbs ref="breadcrumbs" :entries="breadcrumbEntries" @keydown="handleBreadcrumbKeydown" />
-        <p class="view-lede">Manage your account details and passkeys.</p>
+      <p class="view-lede">Account dashboard for managing credentials and authenticating with other devices.</p>
    </header>
-      <section class="section-block">
+    <section class="section-block" ref="userInfoSection">
      <UserBasicInfo
-          v-if="authStore.userInfo?.user"
+        v-if="authStore.userInfo?.ctx"
-          :name="authStore.userInfo.user.user_name"
+        ref="userBasicInfo"
-          :visits="authStore.userInfo.user.visits || 0"
+        :name="authStore.userInfo.ctx.user.display_name"
-          :created-at="authStore.userInfo.user.created_at"
+        :visits="authStore.userInfo.visits"
-          :last-seen="authStore.userInfo.user.last_seen"
+        :created-at="authStore.userInfo.created_at"
        :last-seen="authStore.userInfo.last_seen"
        :loading="authStore.isLoading"
        update-endpoint="/auth/api/user/display-name"
        @saved="authStore.loadUserInfo()"
        @edit-name="openNameDialog"
        @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">Provided by another device requesting remote auth.</p>
      </UserBasicInfo>
    </section>
    <section class="section-block">
      <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
          ref="credentialList"
          :credentials="authStore.userInfo?.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">Add New Passkey</button>
+          <button @click="addNewCredential" class="btn-primary" @keydown="handleCredentialButtonKeydown">Register New</button>
-            <button @click="showRegLink = true" class="btn-secondary">Add Another Device</button>
+          <button @click="showRegLink = true" class="btn-secondary" @keydown="handleCredentialButtonKeydown">Another Device</button>
        </div>
      </div>
    </section>
    <SessionList
      ref="sessionList"
      :sessions="sessions"
      :terminating-sessions="terminatingSessions"
      :hovered-credential-uuid="hoveredCredentialUuid"
      :navigation-disabled="hasActiveModal"
      @terminate="terminateSession"
-        section-description="Review where you're signed in and end any sessions you no longer recognize."
+      @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."
    />
    <Modal v-if="showNameDialog" @close="showNameDialog = false">
@@ -61,18 +96,19 @@
    </Modal>
    <section class="section-block">
-        <div class="button-row logout-row" :class="{ single: !hasMultipleSessions }">
+      <div class="button-row" ref="logoutButtons">
        <button
          type="button"
          class="btn-secondary"
-            @click="history.back()"
+          @click="goBack"
          @keydown="handleLogoutButtonKeydown"
        >
          Back
        </button>
-          <button v-if="!hasMultipleSessions" @click="logoutEverywhere" class="btn-danger logout-button" :disabled="authStore.isLoading">Logout</button>
+        <button v-if="!hasMultipleSessions" @click="logoutEverywhere" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">Logout</button>
        <template v-else>
-            <button @click="logout" class="btn-danger logout-button" :disabled="authStore.isLoading">Logout</button>
+          <button @click="logout" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">Logout</button>
-            <button @click="logoutEverywhere" class="btn-danger logout-button" :disabled="authStore.isLoading">All</button>
+          <button @click="logoutEverywhere" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">All</button>
        </template>
      </div>
      <p class="logout-note" v-if="!hasMultipleSessions"><strong>Logout</strong> from {{ currentSessionHost }}.</p>
@@ -80,13 +116,10 @@
    </section>
    <RegistrationLinkModal
      v-if="showRegLink"
-                :endpoint="'/auth/api/user/create-link'"
+      endpoint="/auth/api/user/create-link"
        :auto-copy="false"
        :prefix-copy-with-user-name="false"
      @close="showRegLink = false"
-        @copied="showRegLink = false; authStore.showMessage('Link copied to clipboard!', 'success', 2500)"
+      @copied="onLinkCopied"
    />
    </div>
  </section>
 </template>
@@ -99,9 +132,14 @@ 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'
 import { updateThemeFromSession } from '@/utils/theme'
 const authStore = useAuthStore()
 const updateInterval = ref(null)
@@ -109,8 +147,38 @@ const showNameDialog = ref(false)
 const showRegLink = ref(false)
 const newName = ref('')
 const saving = ref(false)
 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) => { if (newVal) newName.value = authStore.userInfo?.user?.user_name || '' })
+// Theme preference
 const selectedTheme = ref('')
 const themeMenuOpen = ref(false)
 const themeEmoji = computed(() => ({ '': '🌓', light: '☀️', dark: '🌙' })[selectedTheme.value] || '🌓')
 const themeTitle = computed(() => ({ '': 'Auto (system)', light: 'Light mode', dark: 'Dark mode' })[selectedTheme.value] || 'Theme')
 watch(() => authStore.userInfo?.ctx?.user?.theme, (t) => { selectedTheme.value = t || '' }, { immediate: true })
 function setTheme(theme) {
  selectedTheme.value = theme
  themeMenuOpen.value = false
  // Apply immediately for instant feedback
  updateThemeFromSession({ user: { theme } }, true)
  // Save to server in background
  apiJson('/auth/api/user/theme', { method: 'PATCH', body: { theme } })
    .catch(e => authStore.showMessage(e.message, 'error'))
 }
 // Check if any modal/dialog is open (blocks arrow key navigation)
 const hasActiveModal = computed(() => showNameDialog.value || showRegLink.value)
 watch(showNameDialog, (newVal) => { if (newVal) newName.value = authStore.userInfo?.ctx.user.display_name ?? '' })
 onMounted(() => {
  updateInterval.value = setInterval(() => { if (authStore.userInfo) authStore.userInfo = { ...authStore.userInfo } }, 60000)
@@ -120,24 +188,142 @@ onUnmounted(() => { 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) { authStore.showMessage(`Failed to delete passkey: ${error.message}`, 'error') }
 }
@@ -164,8 +350,11 @@ const terminateSession = async (session) => {
 const logoutEverywhere = async () => { await authStore.logoutEverywhere() }
 const logout = async () => { await authStore.logout() }
-const openNameDialog = () => { newName.value = authStore.userInfo?.user?.user_name || ''; showNameDialog.value = true }
+const openNameDialog = () => { newName.value = authStore.userInfo?.ctx.user.display_name ?? ''; showNameDialog.value = true }
-const isAdmin = computed(() => !!(authStore.userInfo?.is_global_admin || authStore.userInfo?.is_org_admin))
+const isAdmin = computed(() => {
  const perms = authStore.userInfo?.ctx.permissions
  return perms.includes('auth:admin') || perms.includes('auth:org:admin')
 })
 const hasMultipleSessions = computed(() => sessions.value.length > 1)
 const breadcrumbEntries = computed(() => { const entries = [{ label: 'Auth', href: makeUiHref() }]; if (isAdmin.value) entries.push({ label: 'Admin', href: adminUiPath() }); return entries })
@@ -174,9 +363,7 @@ const saveName = async () => {
  if (!name) { authStore.showMessage('Name cannot be empty', 'error'); return }
  try {
    saving.value = true
-    const res = await fetch('/auth/api/user/display-name', { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name }) })
+    await apiJson('/auth/api/user/display-name', { method: 'PATCH', body: { display_name: name } })
    const data = await res.json()
    if (!res.ok || data.detail) throw new Error(data.detail || 'Update failed')
    showNameDialog.value = false
    await authStore.loadUserInfo()
    authStore.showMessage('Name updated successfully!', 'success', 3000)
@@ -188,12 +375,20 @@ const saveName = async () => {
 <style scoped>
 .view-lede { margin: 0; color: var(--color-text-muted); font-size: 1rem; }
 .section-header { display: flex; flex-direction: column; gap: 0.4rem; }
 .section-description { margin: 0; color: var(--color-text-muted); }
 .empty-state { margin: 0; color: var(--color-text-muted); text-align: center; padding: 1rem 0; }
 .logout-button { align-self: flex-start; }
 .logout-row { gap: 1rem; }
 .logout-row.single { justify-content: flex-start; }
 .logout-note { margin: 0.75rem 0 0; color: var(--color-text-muted); font-size: 0.875rem; }
-@media (max-width: 720px) { .logout-button { width: 100%; } }
+.remote-auth-inline { display: flex; flex-direction: column; gap: 0.5rem; }
 .remote-auth-label { display: block; margin: 0; font-size: 0.875rem; color: var(--color-text-muted); font-weight: 500; }
 .remote-auth-description { font-size: 0.75rem; color: var(--color-text-muted); }
 .theme-toggle { position: absolute; top: var(--layout-padding); right: var(--layout-padding); }
 .theme-btn { background: none; border: none; padding: 0.25rem; font-size: 1.25rem; cursor: pointer; opacity: 0.5; transition: opacity 0.15s; }
 .theme-btn:hover { opacity: 0.8; }
 .theme-menu { position: absolute; top: 100%; right: 0; width: 5rem; height: 4rem; margin-top: 0.25rem; }
 .theme-option { position: absolute; background: none; border: none; font-size: 1.25rem; cursor: pointer; opacity: 0.5; padding: 0.25rem; border-radius: var(--radius-sm); transition: opacity 0.15s, transform 0.15s; }
 .theme-option:hover { opacity: 1; transform: scale(1.2); }
 .theme-option.active { opacity: 1; }
 .theme-option.top { top: 0; left: 50%; transform: translateX(-50%); }
 .theme-option.top:hover { transform: translateX(-50%) scale(1.2); }
 .theme-option.left { bottom: 0; left: 0; }
 .theme-option.right { bottom: 0; right: 0; }
 </style>
@@ -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>
@@ -1,148 +1,169 @@
 <template>
-  <div v-if="!inline" class="dialog-overlay" @keydown.esc.prevent="$emit('close')">
+  <dialog ref="dialog" @close="$emit('close')" @keydown="handleDialogKeydown">
    <div class="device-dialog" role="dialog" aria-modal="true" aria-labelledby="regTitle">
      <div class="reg-header-row">
        <h2 id="regTitle" class="reg-title">
-          📱 <span v-if="userName">Registration for {{ userName }}</span><span v-else>Device Registration Link</span>
+          📱 <span v-if="userName">Registration for {{ userName }}</span><span v-else>Add Another Device</span>
        </h2>
-        <button class="icon-btn" @click="$emit('close')" aria-label="Close">❌</button>
+        <button class="icon-btn" @click="$emit('close')" aria-label="Close" tabindex="-1">✕</button>
      </div>
      <div class="device-link-section">
        <div class="qr-container">
          <a v-if="url" :href="url" @click.prevent="copy" class="qr-link">
            <canvas ref="qrCanvas" class="qr-code"></canvas>
            <p>{{ displayUrl }}</p>
          </a>
          <div v-else>
            <em>Generating link...</em>
          </div>
        <p class="reg-help">
-            <span v-if="userName">The user should open this link on the device where they want to register.</span>
+          Scan this QR code on the new device, or copy the link and open it there.
-            <span v-else>Open or scan this link on the device you wish to register to your account.</span>
+        </p>
-            <br><small>{{ expirationMessage }}</small>
+
        <QRCodeDisplay
          :url="linkUrl"
          :show-link="true"
          @copied="onCopied"
          @keydown="handleQRKeydown"
        />
        <p class="expiry-note" v-if="expiresAt">
          This link expires {{ formatDate(expiresAt).toLowerCase() }}.
        </p>
      </div>
-      </div>
+
-      <div class="reg-actions">
+      <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 v-else class="registration-inline-wrapper">
    <div class="registration-inline-block section-block">
      <div class="section-header">
        <h2 class="inline-heading">📱 <span v-if="userName">Registration for {{ userName }}</span><span v-else>Device Registration Link</span></h2>
      </div>
      <div class="section-body">
        <div class="device-link-section">
          <div class="qr-container">
            <a v-if="url" :href="url" @click.prevent="copy" class="qr-link">
              <canvas ref="qrCanvas" class="qr-code"></canvas>
              <p>{{ displayUrl }}</p>
            </a>
            <div v-else>
              <em>Generating link...</em>
            </div>
            <p class="reg-help">
              <span v-if="userName">The user should open this link on the device where they want to register.</span>
              <span v-else>Open this link on the device you wish to connect with.</span>
              <br><small>{{ expirationMessage }}</small>
            </p>
          </div>
        </div>
        <div class="button-row" style="margin-top:1rem;">
          <button class="btn-primary" :disabled="!url" @click="copy">Copy Link</button>
          <button v-if="showCloseInInline" class="btn-secondary" @click="$emit('close')">Close</button>
        </div>
      </div>
      </div>
    </div>
  </dialog>
 </template>
 <script setup>
-import { ref, onMounted, watch, computed, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
-import QRCode from 'qrcode/lib/browser'
+import QRCodeDisplay from '@/components/QRCodeDisplay.vue'
 import { apiJson } 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 },
-  autoCopy: { type: Boolean, default: true },
+  userName: { type: String, default: '' }
  userName: { type: String, default: null },
  inline: { type: Boolean, default: false },
  showCloseInInline: { type: Boolean, default: false },
  prefixCopyWithUserName: { type: Boolean, default: false }
 })
-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 actionsRow = ref(null)
 // Store the element that had focus before modal opened
 const previouslyFocusedElement = ref(null)
-const displayUrl = computed(() => url.value ? url.value.replace(/^[^:]+:\/\//,'') : '')
+async function generateLink() {
 const expirationMessage = computed(() => {
  const timeStr = formatDate(expires.value)
  return `⚠️ Expires ${timeStr.startsWith('In ') ? timeStr.substring(3) : timeStr} and can only be used once.`
 })
 async function fetchLink() {
  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
+
-    emit('generated', { url: data.url, expires: data.expires })
+      // Show the dialog as modal
      await nextTick()
-    drawQR()
+      if (dialog.value) {
-    if (props.autoCopy) copy()
+        dialog.value.showModal()
        // Focus primary button (or first button if no primary) after content renders
        const actions = actionsRow.value
        const target = actions?.querySelector('.btn-primary') || actions?.querySelector('button')
        target?.focus()
      }
    } else {
      emit('close')
    }
  } catch (e) {
-    url.value = null
+    authStore.showMessage(e.message || 'Failed to generate link', 'error')
-    expires.value = null
+    emit('close')
    console.error('Failed to create link', e)
  }
 }
-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 is handled automatically by <dialog>
-  let text = url.value
+  // Handle other key navigation
-  if (props.prefixCopyWithUserName && props.userName) {
+  const direction = getDirection(event)
-    text = `${props.userName} ${text}`
+  if (!direction) return
-  }
+
-  try {
+  if (direction === 'down' || direction === 'up') {
-    await navigator.clipboard.writeText(text)
+    // Let the individual handlers manage navigation
-    emit('copied', text)
+    return
    if (!props.inline) emit('close')
  } catch (_) {
    /* ignore */
  }
 }
-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(() => {
  // 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; }
+dialog {
-.icon-btn:hover { opacity:1; }
+  border: none;
-/* Minimal extra styling; main look comes from global styles */
+  background: transparent;
-.qr-link { text-decoration:none; color:inherit; }
+  padding: 0;
-.reg-header-row { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.75rem; }
+  max-width: none;
-.reg-title { margin:0; font-size:1.25rem; font-weight:600; }
+  width: fit-content;
-.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); }
+  height: fit-content;
-.qr-container { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
+  position: fixed;
-.qr-code { display:block; }
+  inset: 0;
-.reg-help { margin-top:.5rem; margin-bottom:.75rem; font-size:.85rem; line-height:1.25rem; text-align:center; }
+  margin: auto;
-.reg-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.25rem; }
+}
-.registration-inline-block .qr-container { align-items:flex-start; }
+
-.registration-inline-block .reg-help { text-align:left; }
+dialog::backdrop {
  -webkit-backdrop-filter: blur(.2rem) brightness(0.5);
  backdrop-filter: blur(.2rem) brightness(0.5);
 }
 .icon-btn { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: .6; }
 .icon-btn:hover { opacity: 1; }
 .reg-header-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
 .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>
@@ -0,0 +1,953 @@
 <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" style="margin-top: 0.5rem;">{{ error }}</p>
        <div class="button-row" style="margin-top: 0.75rem; display: flex; gap: 0.5rem;">
          <button
            type="button"
            class="btn-secondary"
            :disabled="loading"
            @click="deny"
            style="flex: 1;"
          >
            Deny
          </button>
          <button
            ref="submitBtnRef"
            type="submit"
            :disabled="loading"
            class="btn-primary"
            style="flex: 1;"
          >
            {{ 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;
  width: 280px;
  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;
 }
@keyframes spin {
  to { transform: rotate(360deg); }
 }
 .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;
  font-size: 0.875rem;
  color: var(--color-error, #ef4444);
  margin-bottom: 1rem;
 }
 </style>
@@ -0,0 +1,527 @@
 <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" style="margin-top: 0.75rem;">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.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', { session_token: msg.session_token })
        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;
 }
@keyframes spin {
  to { transform: rotate(360deg); }
 }
 .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);
 }
 /* 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>
@@ -0,0 +1,318 @@
 <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 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 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'
 const props = defineProps({
  mode: {
    type: String,
    default: 'login',
    validator: (value) => ['login', 'reauth', 'forbidden'].includes(value)
  }
 })
 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' })
    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() } 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
  }
  try { await setSessionCookie(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 setSessionCookie(result) {
  if (!result?.session_token) {
    console.error('setSessionCookie called with missing session_token:', result)
    throw new Error('Authentication response missing session_token')
  }
  return await fetchJson('/auth/api/set-session', {
    method: 'POST', headers: { Authorization: `Bearer ${result.session_token}` }
  })
 }
 function switchToRemote() {
  authView.value = 'remote'
 }
 function switchToLocal() {
  authView.value = 'local'
 }
 async function handleRemoteAuthenticated(result) {
  showMessage('Authenticated from another device!', 'success', 2000)
  try {
    await setSessionCookie(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()
  await validateSession()
  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>
 .button-row.center { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
 .user-line { margin: 0.5rem 0 0; font-weight: 500; color: var(--color-text); }
 main.view-root { min-height: 100vh; align-items: center; justify-content: center; padding: 2rem 1rem; }
 .surface.surface--tight {
  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>
@@ -5,35 +5,52 @@
      <p class="section-description">{{ sectionDescription }}</p>
    </div>
    <div class="section-body">
-      <div :class="['session-list']">
+      <div>
        <template v-if="Array.isArray(sessions) && sessions.length">
          <div v-for="(group, host) in groupedSessions" :key="host" class="session-group" tabindex="0" @keydown="handleGroupKeydown($event, host)">
            <span :class="['session-group-host', { 'is-current-site': group.isCurrentSite }]">
              <span class="session-group-icon">🌐</span>
              <a v-if="host" :href="hostUrl(host)" tabindex="-1" target="_blank" rel="noopener noreferrer">{{ host }}</a>
              <template v-else>Unbound host</template>
            </span>
            <div class="session-list">
              <div
-            v-for="session in sessions"
+                v-for="session in group.sessions"
                :key="session.id"
-            :class="['session-item', { 'is-current': session.is_current }]"
+                :class="['session-item', {
                  'is-current': session.is_current && !hoveredIp && !hoveredCredentialUuid,
                  'is-hovered': hoveredSession?.id === session.id,
                  '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">
-              <div class="item-icon">
+                  <h4 class="item-title">{{ session.user_agent }}</h4>
                <span class="session-emoji">🌐</span>
              </div>
              <h4 class="item-title">{{ sessionHostLabel(session) }}</h4>
                  <div class="item-actions">
-                <span v-if="session.is_current" class="badge badge-current">Current</span>
+                    <span v-if="session.is_current && !hoveredIp && !hoveredCredentialUuid" class="badge badge-current">Current</span>
-                <span v-else-if="session.is_current_host" class="badge">This host</span>
+                    <span v-else-if="hoveredSession?.id === session.id" 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
                  v-if="allowTerminate"
                      @click="$emit('terminate', session)"
                      class="btn-card-delete"
                      :disabled="isTerminating(session.id)"
                      :title="isTerminating(session.id) ? 'Terminating...' : 'Terminate session'"
-                >🗑️</button>
+                      tabindex="-1"
                    >❌</button>
                  </div>
                </div>
                <div class="item-details">
                  <div class="session-dates">
-                <span class="date-label">Last used:</span>
+                    <span class="date-label">{{ formatDate(session.last_renewed) }}</span>
-                <span class="date-value">{{ formatDate(session.last_renewed) }}</span>
+                    <span class="date-value" @click="copyIp(session.ip)" title="Click to copy full IP">{{ displayIp(session.ip) }}</span>
-                <span class="session-meta-info">{{ session.user_agent }} {{ session.ip }}</span>
+                  </div>
                </div>
              </div>
            </div>
          </div>
@@ -45,29 +62,183 @@
 </template>
 <script setup>
-import { } from 'vue'
+import { computed, ref } from 'vue'
 import { formatDate } from '@/utils/helpers'
 import { useAuthStore } from '@/stores/auth'
 import { hostIP } from '@/utils/helpers'
 import { navigateGrid, handleDeleteKey, handleEscape, getDirection } from '@/utils/keynav'
 const props = defineProps({
  sessions: { type: Array, default: () => [] },
  allowTerminate: { type: Boolean, default: true },
  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: () => ({}) }
+  terminatingSessions: { type: Object, default: () => ({}) },
  hoveredCredentialUuid: { type: String, default: null },
  navigationDisabled: { type: Boolean, default: false },
 })
-const emit = defineEmits(['terminate'])
+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 = (sessionId) => !!props.terminatingSessions[sessionId]
-const sessionHostLabel = (session) => {
+const handleGroupKeydown = (event, host) => {
-  if (!session || !session.host) return 'Unbound host'
+  const group = event.currentTarget
-  return session.host
+  const sessionList = group.querySelector('.session-list')
-}
+  const items = sessionList?.querySelectorAll('.session-item')
-</script>
+  const allGroups = Array.from(document.querySelectorAll('.session-group'))
  const groupIndex = allGroups.indexOf(group)
-<style>
+  // Enter on group header opens link (always allowed)
-.session-meta-info {
+  if (event.key === 'Enter' && event.target === group) {
-  grid-column: span 2;
+    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))
 }
-</style>
+
 const handleItemKeydown = (event, session) => {
  // Handle delete (always allowed even with modal)
  handleDeleteKey(event, () => {
    if (!isTerminating(session.id)) 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
 const currentHostIP = computed(() => {
  if (hoveredIp.value) return hostIP(hoveredIp.value)
  const current = props.sessions.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 props.sessions) {
    const host = session.host || ''
    if (!groups[host]) {
      groups[host] = { sessions: [], isCurrentSite: false }
    }
    groups[host].sessions.push(session)
    if (session.is_current_host) {
      groups[host].isCurrentSite = true
    }
  }
  // Sort sessions within each group by last_renewed descending
  for (const host in groups) {
    groups[host].sessions.sort((a, b) => new Date(b.last_renewed) - new Date(a.last_renewed))
  }
  // Sort groups by host name (natural sort)
  const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' })
  const sortedHosts = Object.keys(groups).sort(collator.compare)
  const sortedGroups = {}
  for (const host of sortedHosts) {
    sortedGroups[host] = groups[host]
  }
  return sortedGroups
 })
 </script>
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="userLoaded" class="user-info">
+  <div v-if="userLoaded" class="user-info" :class="{ 'has-extra': $slots.default }">
    <h3 class="user-name-heading">
      <span class="icon">👤</span>
      <span class="user-name-row">
@@ -11,12 +11,17 @@
      <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="user-details">
-    <span>{{ visits || 0 }}</span>
+      <span class="date-label"><strong>Visits:</strong></span>
-    <span><strong>Registered:</strong></span>
+      <span class="date-value">{{ visits || 0 }}</span>
-    <span>{{ formatDate(createdAt) }}</span>
+      <span class="date-label"><strong>Registered:</strong></span>
-    <span><strong>Last seen:</strong></span>
+      <span class="date-value">{{ formatDate(createdAt) }}</span>
-    <span>{{ formatDate(lastSeen) }}</span>
+      <span class="date-label"><strong>Last seen:</strong></span>
      <span class="date-value">{{ formatDate(lastSeen) }}</span>
    </div>
    <div v-if="$slots.default" class="user-info-extra">
      <slot></slot>
    </div>
  </div>
 </template>
@@ -44,23 +49,59 @@ 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: auto 1fr 2fr;
-.org-role-sub { grid-column: span 2; display:flex; flex-direction:column; margin: -0.15rem 0 0.25rem; }
+  grid-template-areas:
    "heading heading extra"
    "org org extra"
    "label1 value1 extra"
    "label2 value2 extra"
    "label3 value3 extra";
 }
 .user-info:not(.has-extra) {
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "heading heading"
    "org org"
    "label1 value1"
    "label2 value2"
    "label3 value3";
 }
@media (max-width: 720px) {
  .user-info.has-extra {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "heading heading"
      "org org"
      "label1 value1"
      "label2 value2"
      "label3 value3"
      "extra extra";
  }
 }
 .user-name-heading { grid-area: heading; display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 0.25rem 0; }
 .org-role-sub { grid-area: org; display:flex; flex-direction:column; margin: -0.15rem 0 0.25rem; }
 .org-line { font-size: .7rem; font-weight:600; line-height:1.1; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
 .role-line { font-size:.65rem; color: var(--color-text-muted); line-height:1.1; }
-.user-info span { text-align: left; }
+.info-label:nth-of-type(1) { grid-area: label1; }
-.user-name-heading { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.25rem 0; }
+.info-value:nth-of-type(2) { grid-area: value1; }
 .info-label:nth-of-type(3) { grid-area: label2; }
 .info-value:nth-of-type(4) { grid-area: value2; }
 .info-label:nth-of-type(5) { grid-area: label3; }
 .info-value:nth-of-type(6) { grid-area: value3; }
 .user-info-extra { grid-area: extra; padding-left: 2rem; border-left: 1px solid var(--color-border); }
 .user-name-row { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; }
 .user-name-row.editing { flex: 1 1 auto; }
 .icon { flex: 0 0 auto; }
 .display-name { font-weight: 600; font-size: 1.05em; line-height: 1.2; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .name-input { width: auto; flex: 1 1 140px; min-width: 120px; padding: 6px 8px; font-size: 0.9em; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface); color: var(--color-text); }
 .user-name-heading .name-input { width: auto; }
 .name-input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
-.mini-btn { width: auto; padding: 4px 6px; margin: 0; font-size: 0.75em; line-height: 1; background: var(--color-surface-muted); border: 1px solid var(--color-border-strong); border-radius: 6px; cursor: pointer; transition: background 0.2s, transform 0.15s, color 0.2s ease; color: var(--color-text); }
+.mini-btn { width: auto; padding: 4px 6px; margin: 0; font-size: 0.75em; line-height: 1; cursor: pointer; }
 .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>
@@ -1,138 +0,0 @@
 <template>
  <div class="app-shell">
    <StatusMessage />
    <main class="view-root host-view">
      <div class="view-content">
        <header class="view-header">
          <h1>{{ headingTitle }}</h1>
          <p class="view-lede">{{ subheading }}</p>
        </header>
        <section class="section-block">
          <div class="section-body">
            <UserBasicInfo
              v-if="user"
              :name="user.user_name"
              :visits="user.visits || 0"
              :created-at="user.created_at"
              :last-seen="user.last_seen"
              :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">
              <button
                type="button"
                class="btn-secondary"
                @click="history.back()"
              >
                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>
      </div>
    </main>
  </div>
 </template>
 <script setup>
 import { computed, onMounted, ref } from 'vue'
 import StatusMessage from '@/components/StatusMessage.vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
 import { useAuthStore } from '@/stores/auth'
 const authStore = useAuthStore()
 const initializing = ref(true)
 const currentHost = window.location.host
 const user = computed(() => authStore.userInfo?.user || null)
 const orgDisplayName = computed(() => authStore.userInfo?.org?.display_name || '')
 const roleDisplayName = computed(() => authStore.userInfo?.role?.display_name || '')
 const headingTitle = computed(() => {
  const service = authStore.settings?.rp_name
  return service ? `${service} account` : 'Account overview'
 })
 const subheading = computed(() => {
  const service = authStore.settings?.rp_name || 'this service'
  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()
 }
 onMounted(async () => {
  try {
    await authStore.loadSettings()
    const service = authStore.settings?.rp_name
    if (service) document.title = `${service} · Account summary`
    await authStore.loadUserInfo()
  } catch (error) {
    const message = error instanceof Error ? error.message : 'Unable to load session details'
    authStore.showMessage(message, 'error', 4000)
  } finally {
    initializing.value = false
  }
 })
 </script>
 <style scoped>
 .host-view { padding: 3rem 1.5rem 4rem; }
 .host-actions { display: flex; flex-direction: column; gap: 0.75rem; }
 .host-actions .button-row { gap: 0.75rem; flex-wrap: wrap; }
 .host-actions .button-row button { flex: 0 0 auto; }
 .note { margin: 0; color: var(--color-text-muted); }
 .link { color: var(--color-accent); text-decoration: none; }
 .link:hover { text-decoration: underline; }
 .view-hint { margin-top: 0.5rem; color: var(--color-text-muted); }
 .empty-state { margin: 0; color: var(--color-text-muted); }
@media (max-width: 600px) {
  .host-actions .button-row { flex-direction: column; }
  .host-actions .button-row button { width: 100%; }
 }
 </style>
@@ -1,11 +0,0 @@
 import '@/assets/style.css'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import HostApp from './HostApp.vue'
 const app = createApp(HostApp)
 app.use(createPinia())
 app.mount('#app')
@@ -1,11 +0,0 @@
 import './assets/style.css'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 const app = createApp(App)
 app.use(createPinia())
 app.mount('#app')
@@ -1,176 +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 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">{{ headerMessage }}</p>
          </header>
          <section class="section-block">
            <div class="section-body center">
              <div class="button-row center">
                <button class="btn-secondary" :disabled="loading" @click="backNav">Back</button>
                <button v-if="canAuthenticate" class="btn-primary" :disabled="loading" @click="authenticateUser">
                  {{ loading ? 'Signing in…' : 'Login' }}
                </button>
                <button v-if="isAuthenticated" class="btn-danger" :disabled="loading" @click="logoutUser">Logout</button>
                <button v-if="isAuthenticated" class="btn-primary" :disabled="loading" @click="returnHome">Profile</button>
              </div>
            </div>
          </section>
        </div>
      </div>
    </main>
  </div>
 </template>
 <script setup>
 import { computed, onMounted, reactive, ref } from 'vue'
 import passkey from '@/utils/passkey'
 import { getSettings, uiBasePath } from '@/utils/settings'
 const status = reactive({ show: false, message: '', type: 'info' })
 const initializing = ref(true)
 const loading = ref(false)
 const settings = ref(null)
 const userInfo = ref(null)
 let statusTimer = null
 const isAuthenticated = computed(() => !!userInfo.value?.authenticated)
 const canAuthenticate = computed(() => !initializing.value && !isAuthenticated.value)
 const basePath = computed(() => uiBasePath())
 const headingTitle = computed(() => {
  if (!isAuthenticated.value) return `🔐 ${settings.value?.rp_name || location.origin}`
  return '🚫 Forbidden'
 })
 const headerMessage = computed(() => {
  if (!isAuthenticated.value) return 'Please sign in to access this page.'
  return 'You lack the permissions required to access this page.'
 })
 const userDisplayName = computed(() => userInfo.value?.user?.user_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) document.title = isAuthenticated.value ? `${data.rp_name} · Forbidden` : `${data.rp_name} · Sign In`
  } catch (error) {
    console.warn('Unable to load settings', error)
  }
 }
 async function fetchUserInfo() {
  try {
    const res = await fetch('/auth/api/user-info', { method: 'POST' })
    console.log("fetchUserInfo response:", res); // Debug log
    if (!res.ok) {
      const payload = await safeParseJson(res)
      showMessage(payload.detail || 'Unable to load user session info.', 'error', 2000)
      return
    }
    userInfo.value = await res.json()
    // If the user is authenticated but still here, they lack permissions.
    if (isAuthenticated.value) showMessage('Permission Denied', 'error', 2000)
  } catch (error) {
    console.error('Failed to load user info', error)
    showMessage('Could not contact the authentication server', 'error', 2000)
  }
 }
 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
  }
  location.reload()
 }
 async function logoutUser() {
  if (loading.value) return
  loading.value = true
  try { await fetch('/auth/api/logout', { method: 'POST' }) } catch (_) { /* ignore */ }
  finally { loading.value = false; window.location.reload() }
 }
 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) throw new Error(payload?.detail || 'Session could not be established.')
  return payload
 }
 function returnHome() {
  const target = basePath.value || '/auth/'
  if (window.location.pathname !== target) history.replaceState(null, '', target)
  window.location.href = target
 }
 function backNav() {
  try {
    if (history.length > 1) {
      history.back()
      return
    }
  } catch (_) { /* ignore */ }
  returnHome()
 }
 async function safeParseJson(response) { try { return await response.json() } catch (_) { return null } }
 onMounted(async () => {
  await fetchSettings()
  await fetchUserInfo()
  initializing.value = false
 })
 </script>
 <style scoped>
 .button-row.center { display: flex; justify-content: center; gap: 0.75rem; }
 .user-line { margin: 0.5rem 0 0; font-weight: 500; color: var(--color-text); }
 /* Vertically center the restricted "dialog" surface in the viewport */
 main.view-root { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
 main.view-root .view-content { width: 100%; }
 .surface.surface--tight {
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
 }
 </style>
@@ -1,5 +0,0 @@
 import { createApp } from 'vue'
 import RestrictedApp from './RestrictedApp.vue'
 import '@/assets/style.css'
 createApp(RestrictedApp).mount('#app')
@@ -1,6 +1,8 @@
 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: () => ({
@@ -25,34 +27,35 @@ export const useAuthStore = defineStore('auth', {
    setLoading(flag) {
      this.isLoading = !!flag
    },
-    showMessage(message, type = 'info', duration = 3000) {
+    showMessage(message, type = 'info', duration = null) {
      // Default duration: 5 seconds for errors, 3 seconds for others
      const effectiveDuration = duration ?? (type === 'error' ? 5000 : 3000)
      this.status = {
        message,
        type,
        show: true
      }
-      if (duration > 0) {
+      if (effectiveDuration > 0) {
        setTimeout(() => {
          this.status.show = false
-        }, duration)
+        }, effectiveDuration)
      }
    },
-    async setSessionCookie(sessionToken) {
+    async setSessionCookie(result) {
-      const response = await fetch('/auth/api/set-session', {
+      if (!result?.session_token) {
-        method: 'POST',
+        console.error('setSessionCookie called with missing session_token:', result)
-        headers: {'Authorization': `Bearer ${sessionToken}`},
+        throw new Error('Authentication response missing session_token')
      })
      const result = await response.json()
      if (result.detail) {
        throw new Error(result.detail)
      }
-      return result
+      return await apiJson('/auth/api/set-session', {
        method: 'POST',
        headers: {'Authorization': `Bearer ${result.session_token}`},
      })
    },
    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
@@ -65,7 +68,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()
@@ -82,45 +85,27 @@ export const useAuthStore = defineStore('auth', {
      this.settings = await getSettings()
    },
    async loadUserInfo() {
      const response = await fetch('/auth/api/user-info', { method: 'POST' })
      let result = null
      try {
-        result = await response.json()
+        this.userInfo = await apiJson('/auth/api/user-info', { method: 'POST' })
-      } catch (_) {
+        updateThemeFromSession(this.userInfo?.ctx)
-        // ignore JSON parse errors (unlikely)
+        console.log('User info loaded:', this.userInfo)
      } catch (error) {
        // Suppress toast for 401/403 errors - the auth iframe will handle these
        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)
        }
-      if (response.status === 401 && result?.detail) {
+        throw error
        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 deleteCredential(uuid) {
-  const response = await fetch(`/auth/api/user/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(sessionId) {
      try {
-        const res = await fetch(`/auth/api/user/session/${sessionId}`, { method: 'DELETE' })
+        const payload = await apiJson(`/auth/api/user/session/${sessionId}`, { method: 'DELETE' })
        let payload = null
        try {
          payload = await res.json()
        } catch (_) {
          // ignore JSON parse errors
        }
        if (!res.ok || payload?.detail) {
          const message = payload?.detail || 'Failed to terminate session'
          throw new Error(message)
        }
        if (payload?.current_session_terminated) {
          sessionStorage.clear()
          location.reload()
@@ -135,43 +120,29 @@ export const useAuthStore = defineStore('auth', {
    },
    async logout() {
      try {
-        const res = await fetch('/auth/api/logout', {method: 'POST'})
+        await apiJson('/auth/api/logout', {method: 'POST'})
        if (!res.ok) {
          let message = 'Logout failed'
          try {
            const data = await res.json()
            if (data?.detail) message = data.detail
          } catch (_) {
            // ignore JSON parse errors
          }
          throw new Error(message)
        }
        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 {
-        const res = await fetch('/auth/api/user/logout-all', {method: 'POST'})
+        await apiJson('/auth/api/user/logout-all', {method: 'POST'})
        if (!res.ok) {
          let message = 'Logout failed'
          try {
            const data = await res.json()
            if (data?.detail) message = data.detail
          } catch (_) {
            // ignore JSON parse errors
          }
          throw new Error(message)
        }
        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')
        }
      }
    },
  }
 })
@@ -0,0 +1,32 @@
 // Cache for auth iframe URL by mode
 const authIframeUrlCache = {}
 /**
 * Get the auth iframe URL for a given mode.
 * Fetches from /auth/api/forward which returns URL in the auth.iframe field.
 * Results are cached per mode.
 * @param {string} mode - The auth mode ('login', 'reauth', 'forbidden')
 * @returns {Promise<string>} - The URL for the iframe
 */
 export async function getAuthIframeUrl(mode = 'login') {
  if (authIframeUrlCache[mode]) {
    return authIframeUrlCache[mode]
  }
  // Fetch from forward endpoint - it returns URL in auth.iframe on 401/403
  const response = await fetch('/auth/api/forward')
  if (response.status === 401 || response.status === 403) {
    const data = await response.json()
    if (data.auth?.iframe) {
      // The iframe field now contains a URL with hash fragment
      // If mode differs, update the hash param
      let url = data.auth.iframe
      if (mode !== data.auth.mode) {
        url = url.replace(/mode=[^&]*/, `mode=${mode}`)
      }
      authIframeUrlCache[mode] = url
      return url
    }
  }
  throw new Error('Unable to fetch auth iframe URL')
 }
@@ -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) {
@@ -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(/=+$/, '')
 }
@@ -24,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
  }
 }
@@ -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
 }
@@ -1,6 +1,7 @@
 import { startRegistration, startAuthentication } from '@simplewebauthn/browser'
 import aWebSocket from '@/utils/awaitable-websocket'
 import { getSettings } from '@/utils/settings'
 import { showAuthIframe } from 'paskia'
 // Generic path normalizer: if an auth_host is configured and differs from current
 // host, return absolute URL (scheme derived by aWebSocket). Otherwise, keep as-is.
@@ -10,34 +11,61 @@ async function makeUrl(path) {
  return h && location.host !== h ? `//${h}${path}` : path
 }
-export async function register(resetToken = null, displayName = null) {
+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('&')}` : ''
  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() {
  const ws = await aWebSocket(await makeUrl('/auth/ws/authenticate'))
  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)
@@ -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()
@@ -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
 }
@@ -0,0 +1,101 @@
 // Theme override utilities - shared across apps
 // User preference or URL hash can force light/dark mode
 export const themeColors = {
  light: {
    'color-canvas': '#ffffff',
    'color-surface': '#eff6ff',
    'color-surface-subtle': '#dbeafe',
    'color-border': '#2563eb',
    'color-border-strong': '#1e40af',
    'color-heading': '#1e3a8a',
    'color-text': '#1e293b',
    'color-text-muted': '#475569',
    'color-link': '#1d4ed8',
    'color-link-hover': '#1e40af',
    'color-accent': '#2563eb',
    'color-accent-strong': '#1e40af',
    'color-accent-contrast': '#ffffff',
    'color-success-text': '#166534',
    'color-success-bg': '#dcfce7',
    'color-error-text': '#b91c1c',
    'color-error-bg': '#fee2e2',
    'color-info-text': '#1e40af',
    'color-info-bg': '#dbeafe',
    'color-danger': '#dc2626',
    'shadow-soft': '0 10px 30px rgba(30, 64, 175, 0.15)',
  },
  dark: {
    'color-canvas': '#0f172a',
    'color-surface': '#141b2f',
    'color-surface-subtle': '#1b243b',
    'color-border': '#25304a',
    'color-border-strong': '#3d4d6b',
    'color-heading': '#fff',
    'color-text': '#e2e8f0',
    'color-text-muted': '#94a3b8',
    'color-link': '#60a5fa',
    'color-link-hover': '#93c5fd',
    'color-accent': '#60a5fa',
    'color-accent-strong': '#3b82f6',
    'color-accent-contrast': '#0b1120',
    'color-success-text': '#34d399',
    'color-success-bg': '#1a4d2e',
    'color-error-text': '#fca5a5',
    'color-error-bg': '#4a1f1f',
    'color-info-text': '#bae6fd',
    'color-info-bg': '#1e3a5f',
    'color-danger': '#f87171',
    'shadow-soft': '0 0 0 #000000',
  }
 }
 const STYLE_ID = 'theme-override'
 const TRANSITION_ID = 'theme-transition'
 const STORAGE_KEY = 'paskia-theme'
 /** Apply theme override CSS - selector targets .surface for restricted app, :root for main apps */
 export function applyTheme(theme, selector = ':root', 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)
  }
  document.getElementById(STYLE_ID)?.remove()
  if (theme && themeColors[theme]) {
    const css = `${selector} { ${Object.entries(themeColors[theme]).map(([k, v]) => `--${k}: ${v}`).join('; ')}; }`
    const style = document.createElement('style')
    style.id = STYLE_ID
    style.textContent = css
    document.head.appendChild(style)
  }
 }
 /** 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, ':root', animate)
 }
@@ -0,0 +1,35 @@
 /**
 * FastAPI-Vue Vite Plugin
 *
 * Configures Vite for FastAPI backend integration:
 * - Proxies /api/* requests to the FastAPI backend
 * - Builds to the Python module's frontend-build directory
 *
 * Environment variables (with defaults):
 *   FASTAPI_VUE_BACKEND_URL=http://localhost:5180 - Backend API URL for proxying
 */
 const backendUrl = process.env.FASTAPI_VUE_BACKEND_URL || "http://localhost:5180"
 export default function fastapiVue({ paths = ["/api"] } = {}) {
  // Build proxy configuration for each path
  const proxy = {}
  for (const path of paths) {
    proxy[path] = {
      target: backendUrl,
      changeOrigin: false,
      ws: true,
    }
  }
  return {
    name: "fastapi-vite",
    config: () => ({
      server: { proxy },
      build: {
        outDir: "../paskia/frontend-build",
        emptyOutDir: true,
      },
    }),
  }
 }
@@ -1,64 +1,129 @@
 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",
      // 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: '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/host' || url === '/auth/host/') return '/host/index.html'
          if (url === '/host' || url === '/host/') return '/host/index.html'
          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'),
-        host: resolve(__dirname, 'host/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]'
        }
      }
    }
  }
 }))
@@ -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
@@ -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/#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))
  }
 }
 ```
@@ -0,0 +1,32 @@
 {
  "name": "paskia",
  "version": "0.1.2",
  "description": "Paskia authentication utilities for JavaScript",
  "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"
  ],
  "license": "Unlicense"
 }
@@ -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
@@ -0,0 +1,25 @@
 export {
  ApiError,
  NetworkError,
  AuthCancelledError,
  apiFetch,
  apiJson,
  fetchJson,
  getUserFriendlyErrorMessage,
  shouldShowErrorToast,
  createApiCaller,
 } from './fetch'
 export type { ApiFetchOptions, FetchJsonOptions } from './fetch'
 export {
  holdGlobalBackdrop,
  releaseGlobalBackdrop,
  isAuthIframeOpen,
  hideAuthIframe,
  showAuthIframe,
  createAuthIframe,
  removeAuthIframe,
 } from './overlay'
 export { SessionValidator } from './validate'
@@ -0,0 +1,166 @@
 const AUTH_IFRAME_ID = 'paskia-iframe'
 const STYLES_ID = 'paskia-dialog'
 const STYLES_TEXT = `\
 body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1099;
  background: transparent;
  backdrop-filter: blur(0) brightness(1);
  -webkit-backdrop-filter: blur(0) brightness(1);
  pointer-events: none;
  visibility: hidden;
  transition: all 0.2s ease-out;
 }
 body.paskia-backdrop::before {
  -webkit-backdrop-filter: blur(.2rem) brightness(0.5);
  backdrop-filter: blur(.2rem) brightness(0.5);
  visibility: visible;
 }
 body.paskia-backdrop {
  overflow: auto;
 }
 #${AUTH_IFRAME_ID} {
  border: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  color-scheme: auto;
  background: transparent;
 }
 `
 let authIframe: HTMLIFrameElement | null = null
 let authPromise: Promise<void> | null = null
 let authResolve: (() => void) | null = null
 let authReject: ((error: Error) => void) | null = null
 let messageListenerInstalled = false
 let backdropHolders = 0
 function injectStyles(): void {
  if (document.getElementById(STYLES_ID)) return
  const style = document.createElement('style')
  style.id = STYLES_ID
  style.textContent = STYLES_TEXT
  document.head.insertBefore(style, document.head.firstChild)
 }
 export class AuthCancelledError extends Error {
  constructor() {
    super('Authentication cancelled')
    this.name = 'AuthCancelledError'
  }
 }
 export function holdGlobalBackdrop(): void {
  backdropHolders++
  document.body.classList.add('paskia-backdrop')
 }
 export function releaseGlobalBackdrop(): void {
  backdropHolders = Math.max(0, backdropHolders - 1)
  if (backdropHolders === 0) {
    document.body.classList.remove('paskia-backdrop')
  }
 }
 export function isAuthIframeOpen(): boolean {
  return !!document.getElementById(AUTH_IFRAME_ID)
 }
 export function hideAuthIframe(): void {
  if (authIframe) {
    authIframe.remove()
    authIframe = null
    releaseGlobalBackdrop()
  }
 }
 function handleAuthMessage(event: MessageEvent): void {
  const data = event.data as { type?: string }
  if (!data?.type) return
  switch (data.type) {
    case 'auth-success':
      hideAuthIframe()
      if (authResolve) {
        authResolve()
        authPromise = null
        authResolve = null
        authReject = null
      }
      break
    case 'auth-back':
      hideAuthIframe()
      if (authReject) {
        authReject(new AuthCancelledError())
        authPromise = null
        authResolve = null
        authReject = null
      }
      break
  }
 }
 function ensureMessageListener(): void {
  if (messageListenerInstalled) return
  if (typeof window !== 'undefined') {
    window.addEventListener('message', handleAuthMessage)
    messageListenerInstalled = true
  }
 }
 export function showAuthIframe(iframeUrl: string, title = 'Authentication'): Promise<void> {
  injectStyles()
  ensureMessageListener()
  if (authPromise) return authPromise
  if (document.getElementById(AUTH_IFRAME_ID)) {
    authPromise = new Promise((resolve, reject) => {
      authResolve = resolve
      authReject = reject
    })
    return authPromise
  }
  authPromise = new Promise((resolve, reject) => {
    authResolve = resolve
    authReject = reject
  })
  hideAuthIframe()
  holdGlobalBackdrop()
  authIframe = document.createElement('iframe')
  authIframe.id = AUTH_IFRAME_ID
  authIframe.title = title
  authIframe.src = iframeUrl
  document.body.appendChild(authIframe)
  return authPromise
 }
 export function createAuthIframe(iframeUrl: string, title = 'Authentication'): HTMLIFrameElement {
  injectStyles()
  const existing = document.getElementById(AUTH_IFRAME_ID)
  if (existing) existing.remove()
  const iframe = document.createElement('iframe')
  iframe.id = AUTH_IFRAME_ID
  iframe.title = title
  iframe.src = iframeUrl
  document.body.appendChild(iframe)
  return iframe
 }
 export function removeAuthIframe(): void {
  const iframe = document.getElementById(AUTH_IFRAME_ID)
  if (iframe) iframe.remove()
 }
@@ -0,0 +1,66 @@
 import { apiJson } from './fetch'
 const POLL_INTERVAL = 60 * 1000
 const IDLE_TIMEOUT = 5 * 60 * 1000
 export class SessionValidator {
  private userUuidGetter: () => string | undefined
  private onSessionLost: (error: Error) => void
  private pollTimer: ReturnType<typeof setInterval> | null = null
  private idleTimer: ReturnType<typeof setTimeout> | null = null
  private active = false
  constructor(userUuidGetter: () => string | undefined, onSessionLost: (error: Error) => void) {
    this.userUuidGetter = userUuidGetter
    this.onSessionLost = onSessionLost
    this.resetIdleTimer = this.resetIdleTimer.bind(this)
  }
  resetIdleTimer(): void {
    if (this.idleTimer) clearTimeout(this.idleTimer)
    if (!this.active) this.startPolling()
    this.idleTimer = setTimeout(() => this.stopPolling(), IDLE_TIMEOUT)
  }
  async validate(): Promise<void> {
    try {
      const data = await apiJson<{ ctx?: { user?: { uuid?: string } } }>('/auth/api/validate', { method: 'POST' })
      const newUuid = data.ctx?.user?.uuid
      if (newUuid !== this.userUuidGetter()) {
        window.location.reload()
      }
    } catch (error) {
      if ((error as Error).name !== 'NetworkError') {
        this.stopPolling()
        this.onSessionLost(error as Error)
      }
    }
  }
  startPolling(): void {
    if (this.active) return
    this.active = true
    this.pollTimer = setInterval(() => this.validate(), POLL_INTERVAL)
  }
  stopPolling(): void {
    this.active = false
    if (this.pollTimer) {
      clearInterval(this.pollTimer)
      this.pollTimer = null
    }
  }
  start(): void {
    window.addEventListener('pointermove', this.resetIdleTimer)
    window.addEventListener('pointerdown', this.resetIdleTimer)
    this.resetIdleTimer()
  }
  stop(): void {
    window.removeEventListener('pointermove', this.resetIdleTimer)
    window.removeEventListener('pointerdown', this.resetIdleTimer)
    if (this.idleTimer) clearTimeout(this.idleTimer)
    this.stopPolling()
  }
 }
@@ -0,0 +1,15 @@
 {
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "declaration": true,
    "declarationDir": "./dist",
    "outDir": "./dist",
    "rootDir": "./src",
    "lib": ["ES2020", "DOM"],
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts"]
 }
@@ -0,0 +1,17 @@
 import { defineConfig } from 'vite'
 import { resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import dts from 'vite-plugin-dts'
 const __dirname = fileURLToPath(new URL('.', import.meta.url))
 export default defineConfig({
  plugins: [dts({ rollupTypes: true })],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      fileName: 'paskia',
      formats: ['es'],
    },
  },
 })
@@ -0,0 +1,3 @@
 from paskia.sansio import Passkey
 __all__ = ["Passkey"]
@@ -10,23 +10,24 @@ This module provides functionality to:
 import json
 from collections.abc import Iterable
 from importlib.resources import files
 from uuid import UUID
 __ALL__ = ["AAGUID", "filter"]
 # Path to the AAGUID JSON file
-AAGUID_FILE = files("passkey") / "aaguid" / "combined_aaguid.json"
+AAGUID_FILE = files("paskia") / "aaguid" / "combined_aaguid.json"
 AAGUID: dict[str, dict] = json.loads(AAGUID_FILE.read_text(encoding="utf-8"))
-def filter(aaguids: Iterable[str]) -> dict[str, dict]:
+def filter(aaguids: Iterable[UUID]) -> dict[str, dict]:
    """
    Get AAGUID information only for the provided set of AAGUIDs.
    Args:
-        aaguids: Set of AAGUID strings that the user has credentials for
+        aaguids: Iterable of AAGUIDs (UUIDs) that the user has credentials for
    Returns:
-        Dictionary mapping AAGUID to authenticator information for only
+        Dictionary mapping AAGUID string to authenticator information for only
        the AAGUIDs that the user has and that we have data for
    """
-    return {aaguid: AAGUID[aaguid] for aaguid in aaguids if aaguid in AAGUID}
+    return {(s := str(a)): AAGUID[s] for a in aaguids if (s := str(a)) in AAGUID}
@@ -0,0 +1,47 @@
 """
 Core session management for WebAuthn authentication.
 This module provides generic session management functionality that is
 independent of any web framework:
 - Session creation and validation
 - Token handling and refresh
 - Credential management
 """
 from datetime import UTC, datetime
 from typing import TYPE_CHECKING
 from uuid import UUID
 from paskia import db
 from paskia.config import RESET_LIFETIME, SESSION_LIFETIME
 from paskia.util import hostutil
 if TYPE_CHECKING:
    from paskia.db import ResetToken
 EXPIRES = SESSION_LIFETIME
 def expires() -> datetime:
    return datetime.now(UTC) + EXPIRES
 def reset_expires() -> datetime:
    return datetime.now(UTC) + RESET_LIFETIME
 def get_reset(token: str) -> "ResetToken":
    """Validate a credential reset token."""
    record = db.get_reset_token(token)
    if record:
        return record
    raise ValueError("This authentication link is no longer valid.")
 def delete_credential(credential_uuid: UUID, auth: str, host: str | None = None):
    """Delete a specific credential for the current user."""
    ctx = db.data().session_ctx(auth, hostutil.normalize_host(host))
    if not ctx:
        raise ValueError("Session expired")
    db.delete_credential(credential_uuid, ctx.user.uuid)
@@ -0,0 +1,124 @@
 """
 Bootstrap module for passkey authentication system.
 This module handles initial system setup when a new database is created,
 including creating default admin user, organization, permissions, and
 generating a reset link for initial admin setup.
 """
 import asyncio
 import logging
 from paskia import authsession, db, globals
 from paskia.util import hostutil, passphrase
 logger = logging.getLogger(__name__)
 # Shared log message template for admin reset links
 ADMIN_RESET_MESSAGE = """
 👤 Admin  %s
   - Use this link to register a Passkey for the admin user!
 """
 def _log_reset_link(passphrase: str, message: str | None = None) -> str:
    """Log a reset link message and return the URL."""
    reset_link = hostutil.reset_link_url(passphrase)
    if message:
        logger.info(message)
    logger.info(ADMIN_RESET_MESSAGE, reset_link)
    return reset_link
 async def bootstrap_system() -> None:
    """
    Bootstrap the entire system with default data.
    Uses db.bootstrap() which performs all operations in a single transaction.
    The transaction log will show a single "bootstrap" action with all changes.
    """
    # Call the single-transaction bootstrap function
    reset_passphrase = db.bootstrap()
    # Log the reset link (this is separate from the transaction log)
    _log_reset_link(reset_passphrase, "✅ Bootstrap completed!")
 async def check_admin_credentials() -> bool:
    """
    Check if the admin user needs credentials and create a reset link if needed.
    Returns:
        bool: True if a reset link was created, False if admin already has credentials
    """
    try:
        # Get permission organizations to find admin users
        p = next(
            (p for p in db.data().permissions.values() if p.scope == "auth:admin"), None
        )
        if not p or not p.orgs:
            return False
        # Get users from the first organization with admin permission
        first_org_uuid = next(iter(p.orgs))
        org_users = db.get_organization_users(first_org_uuid)
        admin_users = [user for user, role in org_users if role == "Administration"]
        if not admin_users:
            return False
        # Check first admin user for credentials
        admin_user = admin_users[0]
        if not db.get_user_credential_ids(admin_user.uuid):
            # Admin exists but has no credentials, create reset link
            logger.info("⚠️  Admin user has no credentials!")
            token = passphrase.generate()
            expiry = authsession.reset_expires()
            db.create_reset_token(
                user_uuid=admin_user.uuid,
                passphrase=token,
                expiry=expiry,
                token_type="admin registration",
            )
            _log_reset_link(token)
            return True
        return False
    except Exception:
        return False
 async def bootstrap_if_needed() -> bool:
    """
    Check if system needs bootstrapping and perform it if necessary.
    Returns:
        bool: True if bootstrapping was performed, False if system was already set up
    """
    # Check if the admin permission exists - if it does, system is already bootstrapped
    if any(p.scope == "auth:admin" for p in db.data().permissions.values()):
        # Permission exists, system is already bootstrapped
        # Check if admin needs credentials (only for already-bootstrapped systems)
        await check_admin_credentials()
        return False
    # No admin permission found, need to bootstrap
    # Bootstrap creates the admin user AND the reset link, so no need to check credentials after
    await bootstrap_system()
    return True
 # CLI interface
 async def main():
    """Main CLI entry point for bootstrapping."""
    # Configure logging for CLI usage
    logging.basicConfig(level=logging.INFO, format="%(message)s", force=True)
    await globals.init()
 if __name__ == "__main__":
    asyncio.run(main())
--- a/Show More
+++ b/Show More
		`@@ -0,0 +1,3 @@`
							`from paskia.sansio import Passkey`

							`__all__ = ["Passkey"]`