Info fields for PyPI

Add comprehensive remote authentication system allowing users to log in from one device by authenticating from another trusted device. Features include:

- Proof of Work (PoW) protection using PBKDF2-SHA512 to prevent abuse
- Simple pairing codes (3 words) protected by dynamic PoW difficulty
- Autocomplete pairing code input with error checking
- Real-time WebSocket communication between devices

Unlike device addition links and reset links with QR codes that only allow adding an authentication method, and that work offline over the duration of several days, this mechanism is strictly online, with 5 minute time limit.

.gitignore

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

API.md

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

README.md

@@ -1,129 +1,72 @@
-# 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.
+An easy to install passkey-based authentication service that protects any web application with strong passwordless login.
 
-## Features
+## What is Paskia?
 
-- 🔐 WebAuthn registration with Resident Keys support
-- 🔌 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
+- 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
 
-## Docs
+Two interfaces:
+- API fetch: auth checks and login without leaving your app
+- Forward-auth proxy: protect any unprotected site or service (Caddy, Nginx)
 
-- Caddy integration: see `CADDY.md` for short, copy-paste snippets to secure your site with Caddy.
+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.
 
-## Requirements
-
-- Python 3.9+
-- A WebAuthn-compatible authenticator (security key, biometric device, etc.)
+Single Sign-On (SSO): Users register once and authenticate across all applications under your domain name (configured rp-id).
 
 ## 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 serve --rp-id example.com
 ```
 
-### Run (new CLI)
+On the first run it downloads the software and prints a registration link for the Admin. If you are going to be connecting `localhost` directly, for testing, leave out the rp-id.
 
-`passkey-auth` now provides subcommands:
+The server will start up on [localhost:4401](http://localhost:4401) "for authentication required", serving for `*.example.com`.
+
+Otherwise you will need a web server such as [Caddy](https://caddyserver.com/) to serve HTTPS on your actual domain names and proxy requests to Paskia and your backend apps.
+
+A quick example without any config file:
+```fish
+sudo caddy reverse-proxy --from example.com --to :4401
+```
+
+For a permanent install of `paskia` CLI command, not needing `uvx`:
+
+```fish
+uv tool install paskia
+```
+
+## Configuration
+
+There is no config file. Pass only the options on CLI:
 
 ```text
-passkey-auth serve [host:port] [--options]
-passkey-auth dev   [--options]
+paskia serve [options]
 ```
 
-Examples (fish shell shown):
+Optional options:
 
-```fish
-# Production style (no reload)
-passkey-auth serve
-passkey-auth serve 0.0.0.0:8080 --rp-id example.com --origin https://example.com
+- Listen address (one of):
+    * `[host]:port`: Address and port (default: `localhost:4401`)
+    * `unix:/path.sock`: Unix socket
+- `--rp-id <domain>`: Main domain (required for production)
+- `--rp-name "<text>"`: Name of your company or site (default: same as rp-id)
+- `--origin <url>`: Explicit single site (default: `https://<rp-id>`)
+- `--auth-host <domain>`: Dedicated authentication site (e.g., `auth.example.com`)
 
-# Development (auto-reload)
-passkey-auth dev            # localhost:4401
-passkey-auth dev :5500      # localhost on port 5500
-passkey-auth dev 127.0.0.1  # host only, default port 4401
-```
+## Documentation
 
-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!
+- `API.md`: Complete HTTP and WebSocket API reference
+- `Caddy.md`: Caddy configuration examples
+- `Headers.md`: HTTP headers passed to protected applications

caddy/Caddyfile

@@ -1,4 +1,5 @@
 localhost {
+	# Setup the authentication site at /auth/
 	import auth/setup
 	# Only users with myapp:reports and auth admin permissions
 	handle_path /reports {
@@ -22,16 +23,3 @@ localhost {
 		reverse_proxy :3000
 	}
 }
-
-example.com {
-	# Public endpoints in handle blocks before auth
-	@public path /favicon.ico /.well-known/*
-	handle @public {
-		root * /var/www/
-		file_server
-	}
-	# The rest of the site protected, /auth/ reserved for auth service
-	import auth/all perm=auth:admin {
-		reverse_proxy :3000
-	}
-}

caddy/Caddyfile.dev

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

caddy/auth/all

@@ -1,6 +0,0 @@
-# Enable auth site at /auth (setup) and require authentication on all paths
-import setup
-handle {
-    import require {args[0]}
-    {block}
-}

caddy/auth/require

@@ -1,5 +1,7 @@
-# Permission to use within your endpoints that need authentication/authorization, that
-# is different depending on the route (otherwise use auth/all).
+# Permission to use within your endpoints that need authentication/authorization
+# Argument is mandatory and provides a query string to /auth/api/forward
+#   "" means just authentication
+#   perm=yourservice:login to require specific permission
 forward_auth {$AUTH_UPSTREAM:localhost:4401} {
     uri /auth/api/forward?{args[0]}
     header_up Connection keep-alive  # Much higher performance

e2e/.gitignore

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

e2e/README.md

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

e2e/package.json

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

e2e/playwright.config.js

@@ -0,0 +1,50 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Playwright configuration for Paskia E2E tests.
+ * Uses Chrome's Virtual Authenticator for automated passkey testing.
+ *
+ * Run with: 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',
+          ],
+        },
+      },
+    },
+  ],
+})

e2e/playwright.config.ts.bak

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

e2e/tests/10-passkey.spec.ts

@@ -0,0 +1,635 @@
+import { test, expect, createVirtualAuthenticator } from './fixtures/virtual-authenticator'
+import {
+  registerPasskey,
+  authenticatePasskey,
+  validateSession,
+  getUserInfo,
+  logout,
+  getBootstrapResetToken,
+  createDeviceLink,
+  getSessionCookieName,
+  saveSessionToken,
+  getSavedSessionToken,
+  saveDeviceTokens,
+} from './fixtures/passkey-helpers'
+import type { Page, BrowserContext } from '@playwright/test'
+
+/**
+ * Helper to set up session cookie for a page.
+ */
+async function setupSessionCookie(page: Page, sessionToken: string): Promise<void> {
+  const cookieName = getSessionCookieName()
+  await page.context().addCookies([{
+    name: cookieName,
+    value: sessionToken,
+    domain: 'localhost',
+    path: '/',
+    secure: true,
+    httpOnly: true,
+    sameSite: 'Strict' as const,
+  }])
+}
+
+/**
+ * E2E tests for Paskia using Chrome's Virtual Authenticator.
+ *
+ * These tests exercise the complete WebAuthn flow:
+ * 1. Registration via WebSocket using bootstrap reset token
+ * 2. Authentication via WebSocket
+ * 3. Session validation
+ * 4. User info retrieval
+ * 5. Logout
+ *
+ * The virtual authenticator simulates a hardware passkey device,
+ * allowing fully automated testing without physical hardware.
+ */
+
+test.describe('Passkey Authentication E2E', () => {
+  const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+  test.describe.configure({ mode: 'serial' })
+
+  // Shared state across tests in this describe block
+  let sessionToken: string
+  let userUuid: string
+  let credentialUuid: string
+  let resetToken: string | undefined
+
+  test.beforeAll(() => {
+    // Get the bootstrap reset token from global setup
+    resetToken = getBootstrapResetToken()
+    if (!resetToken) {
+      console.warn('⚠️ No reset token found - registration test may fail')
+    } else {
+      console.log(`📝 Using reset token: ${resetToken}`)
+    }
+  })
+
+  test('should load the auth page', async ({ page }) => {
+    // Navigate to auth page to establish origin for WebAuthn
+    await page.goto('/auth/')
+    await expect(page).toHaveTitle(/.*/)
+
+    // Page should load - 401 errors are expected since user is not logged in
+    await page.waitForTimeout(500)
+
+    // Take screenshot of the login view
+    await page.screenshot({ path: 'test-results/login-view.png' })
+    console.log('✓ Screenshot saved: test-results/login-view.png')
+
+    // Just verify the page loaded without JS errors (network 401s are OK)
+    console.log('✓ Auth page loaded successfully')
+  })
+
+  test('should register admin passkey via WebSocket using reset token', async ({ page, virtualAuthenticator }) => {
+    test.skip(!resetToken, 'No reset token available from bootstrap')
+
+    // Must visit the page first to establish origin
+    await page.goto('/auth/')
+
+    // Perform registration via WebSocket with virtual authenticator
+    // Using the bootstrap reset token for the admin user
+    const result = await registerPasskey(page, baseUrl, {
+      resetToken: resetToken,
+      displayName: 'Admin User',
+    })
+
+    // Verify registration result
+    expect(result.session_token).toBeDefined()
+    expect(result.session_token).toHaveLength(16)
+    expect(result.user_uuid).toBeDefined()
+    expect(result.credential_uuid).toBeDefined()
+    expect(result.message).toContain('successfully')
+
+    // Store for subsequent tests
+    sessionToken = result.session_token
+    userUuid = result.user_uuid
+    credentialUuid = result.credential_uuid
+
+    // 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.user_uuid).toBe(userUuid)
+
+    console.log(`✓ Session validated for user: ${validation.user_uuid}`)
+  })
+
+  test('should retrieve user info', async ({ page }) => {
+    test.skip(!sessionToken, 'Requires successful registration')
+
+    const userInfo = await getUserInfo(page, baseUrl, sessionToken)
+
+    expect(userInfo.user.user_uuid).toBe(userUuid)
+    expect(userInfo.user.user_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.user.user_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_uuid}`)
+
+    // 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_uuid).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_uuid}`)
+    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.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 "Add Another Device" button
+    const addDeviceButton = page.getByRole('button', { name: 'Add 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('Device Registration Link')
+
+    // 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 expiration warning is shown
+    await expect(dialog.locator('.reg-help')).toContainText('Expires')
+
+    // Take screenshot of the dialog
+    await dialog.screenshot({ path: 'test-results/device-addition-dialog.png' })
+    console.log(`✓ Screenshot saved: test-results/device-addition-dialog.png`)
+
+    // Verify Copy Link button exists
+    const copyButton = dialog.getByRole('button', { name: 'Copy Link' })
+    await expect(copyButton).toBeVisible()
+
+    // 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: 'Add Another Device' }).click()
+    const dialog = page.locator('.device-dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+
+    // Extract the reset token from the displayed URL
+    const linkText = dialog.locator('.qr-link p')
+    const 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 - Add New Passkey', () => {
+  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 Add New Passkey 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 "Add New Passkey" button
+    const addPasskeyBtn = page.locator('button:has-text("Add New Passkey")')
+    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("Add New Passkey")')
+    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 "Add New Passkey" button
+    const addPasskeyBtn = page.locator('button:has-text("Add New Passkey")')
+    await expect(addPasskeyBtn).toBeVisible()
+    await addPasskeyBtn.click()
+
+    // Wait for registration to complete
+    await page.waitForTimeout(2000)
+
+    // Refresh to see updated list
+    await page.reload()
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+
+    const newCredentialCount = await page.locator('.credential-item').count()
+    expect(newCredentialCount).toBe(initialCredentialCount + 1)
+    console.log(`✓ Added passkey from USB authenticator. Credentials: ${initialCredentialCount} -> ${newCredentialCount}`)
+  })
+
+  test('should display multiple credentials with details', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    await setupSessionCookie(page, sessionToken!)
+
+    // Navigate to profile page
+    await page.goto(`${baseUrl}/auth/`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+
+    // Should have multiple credentials now from previous tests
+    const credentialItems = page.locator('.credential-item')
+    const count = await credentialItems.count()
+
+    // Verify each credential has required elements
+    for (let i = 0; i < count; i++) {
+      const item = credentialItems.nth(i)
+
+      // Should have title/name
+      const title = item.locator('.item-title')
+      await expect(title).toBeVisible()
+
+      // Should have date information
+      const dates = item.locator('.credential-dates')
+      await expect(dates).toBeVisible()
+
+      // Should have created date
+      const createdDate = item.locator('.date-label:has-text("Created:")')
+      await expect(createdDate).toBeVisible()
+    }
+
+    console.log(`✓ All ${count} credentials displayed with proper details`)
+
+    // Take screenshot of credentials list
+    await page.screenshot({
+      path: 'test-results/credentials-list.png',
+      fullPage: false,
+    })
+    console.log(`✓ Screenshot saved: test-results/credentials-list.png`)
+  })
+
+  test('should show current session badge', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    await setupSessionCookie(page, sessionToken!)
+
+    // Navigate to profile page
+    await page.goto(`${baseUrl}/auth/`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+
+    // Look for the "Current" badge indicating current session's credential
+    const currentBadge = page.locator('.badge-current:has-text("Current")')
+    const hasCurrent = await currentBadge.isVisible().catch(() => false)
+
+    if (hasCurrent) {
+      console.log(`✓ Current session credential is marked with "Current" badge`)
+
+      // The current credential should have delete disabled
+      const currentItem = page.locator('.credential-item.current-session')
+      if (await currentItem.isVisible()) {
+        const deleteBtn = currentItem.locator('.btn-card-delete')
+        if (await deleteBtn.isVisible()) {
+          await expect(deleteBtn).toBeDisabled()
+          console.log(`✓ Delete button is disabled for current session credential`)
+        }
+      }
+    } else {
+      console.log(`ℹ No credential marked as current (may be using different auth method)`)
+    }
+  })
+})

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

@@ -0,0 +1,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, credentials: 'include' });
+              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, credentials: 'include' });
+          // 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_uuid}`)
+
+    // 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.user).toBeDefined()
+    console.log('✓ API call succeeded after authentication')
+
+    // Save the session for other tests
+    const cookies = await page.context().cookies()
+    const sessionCookie = cookies.find(c => c.name === getSessionCookieName())
+    if (sessionCookie) {
+      saveSessionToken(sessionCookie.value)
+      console.log(`✓ Saved session token for other tests`)
+    }
+  })
+})
+
+test.describe('API Mode - 401 Reauth Flow', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  test('should show reauth iframe on max_age violation and allow cancellation', async ({ page, virtualAuthenticator }) => {
+    // Get a device token from the pool (created by 10-passkey.spec.ts)
+    const deviceToken = popDeviceToken()
+    test.skip(!deviceToken, 'Requires device token from passkey tests')
+    console.log(`✓ Got device token: ${deviceToken} (${getDeviceTokenCount()} remaining)`)
+
+    // Navigate and register a credential
+    await page.goto(`${baseUrl}/auth/`)
+    const regResult = await registerPasskey(page, baseUrl, {
+      resetToken: deviceToken,
+      displayName: 'Reauth Cancel Test Device',
+    })
+    saveSessionToken(regResult.session_token)
+
+    // Wait for session to age past max_age threshold
+    console.log('Waiting 3s for session to age...')
+    await page.waitForTimeout(3000)
+
+    // Set up test harness with the session
+    await setupSessionCookie(page, regResult.session_token)
+    await setupTestHarness(page)
+
+    // Make API call with max_age=1s (session is now > 1s old)
+    const apiCallPromise = makeApiCall(page, '/auth/api/forward?max_age=1s', 'GET').catch(e => e)
+
+    // Wait for auth iframe to appear
+    await waitForAuthIframe(page)
+    console.log('✓ Reauth iframe appeared (session older than max_age)')
+
+    // Verify it's in reauth mode
+    const iframe = page.frameLocator('#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)
+  })
+})

e2e/tests/99-logout.spec.ts

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

e2e/tests/fixtures/coverage.ts

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

e2e/tests/fixtures/passkey-helpers.ts

@@ -0,0 +1,453 @@
+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_uuid: string
+  credential_uuid: string
+  session_token: string
+  message: string
+}
+
+export interface AuthenticationResult {
+  user_uuid: string
+  session_token: string
+}
+
+/**
+ * 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; user_uuid: string; 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<any> {
+  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 }
+}

e2e/tests/fixtures/virtual-authenticator.ts

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

e2e/tests/global-setup.ts

@@ -0,0 +1,132 @@
+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', 'serve', 'localhost:4404',
+        '--rp-id', 'localhost'
+      ]
+    : [
+        'run', 'paskia', 'serve', 'localhost:4404',
+        '--rp-id', 'localhost'
+      ]
+
+  // Start the server using Node's spawn
+  // Use in-memory SQLite for faster tests
+  const serverProcess = spawn('uv', serverArgs, {
+    cwd: projectRoot,
+    env: {
+      ...process.env,
+      PASKIA_DB: 'sqlite+aiosqlite:///:memory:',
+      COVERAGE_FILE: join(projectRoot, '.coverage'),
+    },
+    stdio: ['ignore', 'pipe', 'pipe'],
+  })
+
+  state.serverPid = serverProcess.pid
+
+  // Capture output to find reset token
+  const resetTokenPromise = new Promise<string>((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      reject(new Error('Timed out waiting for server bootstrap (30s)'))
+    }, 30000)
+
+    let output = ''
+
+    const handleData = (data: Buffer) => {
+      const text = data.toString()
+      output += text
+      process.stdout.write(text) // Echo to console
+
+      // Look for the reset token URL in the output
+      // Format: https://localhost/auth/{token} or http://localhost:4404/auth/{token}
+      // where token is word.word.word.word.word (dot separated)
+      const match = output.match(/https?:\/\/localhost(?::\d+)?\/auth\/([a-z]+(?:\.[a-z]+)+)/)
+      if (match) {
+        clearTimeout(timeout)
+        // Wait a bit for server to fully start
+        setTimeout(() => resolve(match[1]), 1000)
+      }
+    }
+
+    serverProcess.stdout?.on('data', handleData)
+    serverProcess.stderr?.on('data', handleData)
+
+    serverProcess.on('error', (err) => {
+      clearTimeout(timeout)
+      reject(err)
+    })
+
+    serverProcess.on('exit', (code) => {
+      if (code !== 0 && code !== null) {
+        clearTimeout(timeout)
+        reject(new Error(`Server exited with code ${code}`))
+      }
+    })
+  })
+
+  try {
+    state.resetToken = await resetTokenPromise
+    console.log(`\n  ✅ Captured reset token: ${state.resetToken}\n`)
+  } catch (err) {
+    console.error('Failed to capture reset token:', err)
+    serverProcess.kill()
+    throw err
+  }
+
+  // Fetch session cookie name from server settings
+  try {
+    const response = await fetch('http://localhost:4404/auth/api/settings')
+    const settings = await response.json()
+    state.sessionCookie = settings.session_cookie
+    console.log(`  ✅ Session cookie name: ${state.sessionCookie}\n`)
+  } catch (err) {
+    console.error('Failed to fetch settings:', err)
+    serverProcess.kill()
+    throw err
+  }
+
+  // Save state for tests
+  writeFileSync(stateFile, JSON.stringify(state, null, 2))
+
+  console.log('  ✅ E2E test environment ready\n')
+}

e2e/tests/global-teardown.ts

@@ -0,0 +1,148 @@
+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 })
+  }
+
+  // Optionally clean up test database (keep it for debugging by default)
+  if (process.env.CLEANUP_TEST_DB === 'true') {
+    const dbPath = join(testDataDir, 'test.sqlite')
+    if (existsSync(dbPath)) {
+      console.log('  Removing test database...')
+      rmSync(dbPath)
+    }
+    // Remove wal/shm files too
+    for (const ext of ['-wal', '-shm']) {
+      const file = dbPath + ext
+      if (existsSync(file)) rmSync(file)
+    }
+  }
+
+  // Generate Python coverage report if coverage was collected
+  if (COLLECT_COVERAGE) {
+    console.log('  📊 Generating Python coverage report...')
+    try {
+      // Combine parallel coverage data and generate reports
+      execSync('uv run coverage combine', { cwd: projectRoot, stdio: 'inherit' })
+      execSync('uv run coverage report', { cwd: projectRoot, stdio: 'inherit' })
+      execSync('uv run coverage html', { cwd: projectRoot, stdio: 'inherit' })
+      console.log(`  ✅ Python coverage report: ${join(projectRoot, 'coverage-html', 'index.html')}\n`)
+    } catch (err: any) {
+      console.warn(`  Warning: Failed to generate coverage report: ${err.message}`)
+    }
+
+    // Merge and report frontend coverage
+    if (existsSync(coverageDir)) {
+      try {
+        const files = readdirSync(coverageDir).filter(f => f.startsWith('coverage-') && f.endsWith('.json') && f !== 'coverage-merged.json')
+
+        if (files.length > 0) {
+          const merged: Map<string, CoverageEntry> = new Map()
+
+          for (const file of files) {
+            const data: CoverageEntry[] = JSON.parse(readFileSync(join(coverageDir, file), 'utf-8'))
+            for (const entry of data) {
+              const existing = merged.get(entry.url)
+              if (!existing) {
+                merged.set(entry.url, entry)
+              } else {
+                // Merge function coverage counts
+                for (const func of entry.functions) {
+                  const existingFunc = existing.functions.find(f => f.functionName === func.functionName)
+                  if (existingFunc) {
+                    for (let i = 0; i < func.ranges.length && i < existingFunc.ranges.length; i++) {
+                      existingFunc.ranges[i].count += func.ranges[i].count
+                    }
+                  } else {
+                    existing.functions.push(func)
+                  }
+                }
+              }
+            }
+          }
+
+          // Write merged coverage
+          writeFileSync(
+            join(coverageDir, 'coverage-merged.json'),
+            JSON.stringify(Array.from(merged.values()), null, 2)
+          )
+
+          // Generate simple coverage summary
+          let totalFunctions = 0
+          let coveredFunctions = 0
+
+          for (const entry of merged.values()) {
+            for (const func of entry.functions) {
+              totalFunctions++
+              const hasCoverage = func.ranges.some(r => r.count > 0)
+              if (hasCoverage) coveredFunctions++
+            }
+          }
+
+          const percentage = totalFunctions > 0 ? Math.round((coveredFunctions / totalFunctions) * 100) : 0
+          console.log(`  📊 Frontend JS Coverage: ${coveredFunctions}/${totalFunctions} functions (${percentage}%)`)
+          console.log(`  ✅ Frontend coverage data: ${coverageDir}/coverage-merged.json\n`)
+        }
+      } catch (err: any) {
+        console.warn(`  Warning: Failed to merge frontend coverage: ${err.message}`)
+      }
+    }
+  }
+
+  console.log('  ✅ Cleanup complete\n')
+}

e2e/tsconfig.json

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

examples/index.html

@@ -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, credentials: 'include' });
+
+            // Server returns 401 (login/reauth) or 403 (missing permissions)
+            // with a JSON body containing the iframe URL for authentication
+            if (response.status === 401 || response.status === 403) {
+                const data = await response.json();
+                if (data.auth?.iframe) {
+                    const mode = data.auth.mode;  // 'login' or 'reauth'
+                    log(`${mode === 'reauth' ? 'Re-authentication' : 'Authentication'} required...`);
+                    pendingCall = { url, method };
+                    showAuthIframe(data.auth.iframe);
+                    return;
+                }
+                log(`Error: ${response.status} - ${data.detail}`);
+                return;
+            }
+
+            // Forward endpoint returns 204 on success (Caddy then adds Remote-* headers)
+            if (response.status === 204) {
+                log('✓ Success (204 No Content)\nHeaders:\n' +
+                    [...response.headers].filter(([k]) => k.startsWith('remote-'))
+                        .map(([k, v]) => `  ${k}: ${v}`).join('\n'));
+                return;
+            }
+
+            if (!response.ok) {
+                log(`Error: ${response.status} ${response.statusText}`);
+                return;
+            }
+
+            const data = await response.json();
+            log('✓ Response:\n' + JSON.stringify(data, null, 2));
+        }
+
+        async function logout() {
+            await fetch('/auth/api/logout', { method: 'POST', credentials: 'include' });
+            log('Logged out');
+        }
+
+        // Create fullscreen iframe for authentication.
+        // The 'allow' attribute enables WebAuthn (passkey) API inside the iframe.
+        function showAuthIframe(url) {
+            hideAuthIframe();
+            const iframe = document.createElement('iframe');
+            iframe.id = 'auth-iframe';
+            iframe.src = url;
+            document.body.appendChild(iframe);
+            log("Authentication dialog open...")
+        }
+
+        function hideAuthIframe() {
+            document.getElementById('auth-iframe')?.remove();
+        }
+
+        function log(msg) {
+            output.textContent = msg;
+        }
+
+        // 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>

frontend/auth/App.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="app-shell">
+    <StatusMessage />
+    <main class="app-main">
+      <HostProfileView v-if="authenticated && isHostMode" :initializing="loading" />
+      <ProfileView v-else-if="authenticated" />
+      <LoadingView v-else-if="loading" :message="loadingMessage" />
+      <AuthRequiredMessage v-else-if="showBackMessage" @reload="reloadPage" />
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { apiJson, 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 AuthRequiredMessage from '@/components/AccessDenied.vue'
+
+const store = useAuthStore()
+const loading = ref(true)
+const loadingMessage = ref('Loading...')
+const authenticated = ref(false)
+const showBackMessage = ref(false)
+
+/**
+ * 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
+})
+let validationTimer = null
+let authIframe = null
+
+async function loadUserInfo() {
+  try {
+    store.userInfo = await apiJson('/auth/api/user-info', { method: 'POST' })
+    authenticated.value = true
+    loading.value = false
+    startSessionValidation()
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
+async function showAuthIframe() {
+  // Remove existing iframe if any
+  hideAuthIframe()
+
+  // Create new iframe for authentication using src URL
+  const url = await getAuthIframeUrl('login')
+  authIframe = document.createElement('iframe')
+  authIframe.id = 'auth-iframe'
+  authIframe.title = 'Authentication'
+  authIframe.allow = 'publickey-credentials-get; publickey-credentials-create'
+  authIframe.src = url
+  document.body.appendChild(authIframe)
+  loadingMessage.value = 'Authentication required...'
+}
+
+function hideAuthIframe() {
+  if (authIframe) {
+    authIframe.remove()
+    authIframe = null
+  }
+}
+
+function reloadPage() {
+  window.location.reload()
+}
+
+function handleAuthMessage(event) {
+  const data = event.data
+  if (!data?.type) return
+
+  switch (data.type) {
+    case 'auth-success':
+      // Authentication successful - reload user info
+      hideAuthIframe()
+      loading.value = true
+      loadingMessage.value = 'Loading user profile...'
+      loadUserInfo()
+      break
+
+    case 'auth-error':
+      // Authentication failed - keep iframe open so user can retry
+      if (data.cancelled) {
+        console.log('Authentication cancelled by user')
+      } else {
+        store.showMessage(data.message || 'Authentication failed', 'error', 5000)
+      }
+      break
+
+    case 'auth-cancelled':
+      // Legacy support - treat as auth-error with cancelled flag
+      console.log('Authentication cancelled')
+      break
+
+    case 'auth-back':
+      // User clicked Back - show message with reload option
+      hideAuthIframe()
+      loading.value = false
+      showBackMessage.value = true
+      store.showMessage('Authentication cancelled', 'info', 3000)
+      break
+
+    case 'auth-close-request':
+      // Legacy support - treat as back
+      hideAuthIframe()
+      break
+  }
+}
+
+async function validateSession() {
+  try {
+    await apiJson('/auth/api/validate', {
+      method: 'POST',
+      credentials: 'include'
+    })
+    // If successful, session was renewed automatically
+  } catch (error) {
+    if (error.status === 401) {
+      // Session expired - need to re-authenticate
+      console.log('Session expired, requiring re-authentication')
+      authenticated.value = false
+      loading.value = true
+      stopSessionValidation()
+      showAuthIframe()
+    } else {
+      console.error('Session validation error:', error)
+      // Don't treat network errors as session expiry
+    }
+  }
+}
+
+function startSessionValidation() {
+  // Validate session every 2 minutes
+  stopSessionValidation()
+  validationTimer = setInterval(validateSession, 2 * 60 * 1000)
+}
+
+function stopSessionValidation() {
+  if (validationTimer) {
+    clearInterval(validationTimer)
+    validationTimer = null
+  }
+}
+
+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)
+  stopSessionValidation()
+  hideAuthIframe()
+})
+</script>
+
+<style scoped>
+</style>

frontend/auth/admin/AdminApp.vue

@@ -0,0 +1,778 @@
+<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 AuthRequiredMessage 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 { getSettings, adminUiPath, makeUiHref } from '@/utils/settings'
+import { apiJson } from '@/utils/api'
+import { getDirection } from '@/utils/keynav'
+
+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)
+
+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)
+  const settings = await getSettings()
+  if (settings?.rp_name) document.title = 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, id: p.id, display_name: p.display_name }) }
+
+
+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_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() {
+  permissions.value = await apiJson('/auth/api/admin/permissions')
+}
+
+async function loadUserInfo() {
+  info.value = await apiJson('/auth/api/user-info', { method: 'POST' })
+  authenticated.value = true
+}
+
+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 (!info.value.is_global_admin && info.value.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) {
+    if (e.name === 'AuthCancelledError') {
+      showBackMessage.value = true
+    } else {
+      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 }) }
+
+async function performOrgDeletion(orgUuid) {
+  await apiJson(`/auth/api/admin/orgs/${orgUuid}`, { method: 'DELETE' })
+  await Promise.all([loadOrgs(), loadPermissions()])
+}
+
+function deleteOrg(org) {
+  if (!info.value?.is_global_admin) { authStore.showMessage('Global admin only'); return }
+
+  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: 'PUT',
+      body: { role: targetRoleDisplayName }
+    })
+    await loadOrgs()
+  } catch (e) {
+    authStore.showMessage(e.message || 'Failed to update user role')
+  }
+}
+
+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 */ }
+}
+
+// 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_uuid}/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) {
+  // 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 {
+    await apiJson(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, {
+      method: 'PUT',
+      body: { display_name: role.display_name, permissions: newPermissions }
+    })
+    await loadOrgs()
+  } catch (e) {
+    authStore.showMessage(e.message || 'Failed to update role permission')
+    role.permissions = prevPermissions // revert
+  }
+}
+
+// Permission actions
+async function performPermissionDeletion(permissionId) {
+  const params = new URLSearchParams({ permission_id: permissionId })
+  await apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'DELETE' })
+  await loadPermissions()
+}
+
+function deletePermission(p) {
+  const userCount = permissionSummary.value[p.id]?.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.id)) {
+        roleCount++
+      }
+    }
+  }
+
+  if (roleCount === 0) {
+    // No roles have this permission, safe to delete directly
+    performPermissionDeletion(p.id)
+      .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.id)
+  } })
+}
+
+function reloadPage() {
+  window.location.reload()
+}
+
+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 {
+    userDetail.value = await apiJson(`/auth/api/admin/orgs/${u.org_uuid}/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_id: 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')
+    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_uuid}/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: 'PUT', body: { display_name: name, permissions: org.permissions } })
+        .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_uuid}/roles/${role.uuid}`, { method: 'PUT', body: { display_name: name, permissions: role.permissions } })
+        .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_uuid}/users/${user.uuid}/display-name`, { method: 'PUT', 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 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')
+
+      // Close dialog immediately, then perform async operation
+      closeDialog()
+
+      let apiCall;
+      if (newId !== permission.id) {
+        // ID changed, use rename endpoint
+        apiCall = apiJson('/auth/api/admin/permission/rename', { method: 'POST', body: { old_id: permission.id, new_id: newId, display_name: newDisplay } })
+      } else if (newDisplay !== permission.display_name) {
+        // Only display name changed
+        const params = new URLSearchParams({ permission_id: permission.id, display_name: newDisplay })
+        apiCall = apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'PUT' })
+      } else {
+        // No changes
+        return
+      }
+
+      apiCall
+        .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 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')
+
+      // Close dialog immediately, then perform async operation
+      closeDialog()
+      apiJson('/auth/api/admin/permissions', { method: 'POST', body: { id, display_name } })
+        .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; 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">
+      <LoadingView v-if="loading" :message="loadingMessage" />
+      <AuthRequiredMessage
+        v-else-if="showBackMessage"
+        @reload="reloadPage"
+      />
+      <section v-else-if="authenticated && (info?.is_global_admin || info?.is_org_admin)" 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 v-if="error" class="surface surface--tight error">{{ error }}</div>
+            <div v-else class="admin-panels">
+                                  <AdminOverview
+                  v-if="!selectedUser && !selectedOrg && (info.is_global_admin || info.is_org_admin)"
+                  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"
+      @submit-dialog="submitDialog"
+      @close-dialog="closeDialog"
+    />
+  </div>
+</template>
+
+<style scoped>
+.view-admin { padding-bottom: var(--space-3xl); }
+.view-header { display: flex; flex-direction: column; gap: var(--space-sm); }
+.admin-section { margin-top: var(--space-xl); }
+.admin-section-body { display: flex; flex-direction: column; gap: var(--space-xl); }
+.admin-panels { display: flex; flex-direction: column; gap: var(--space-xl); }
+</style>

frontend/auth/admin/index.html

@@ -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>

frontend/auth/admin/main.js

@@ -1,9 +1,11 @@
-import '../assets/style.css'
+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()

frontend/auth/index.html

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

frontend/auth/main.js

@@ -1,11 +1,13 @@
-import './assets/style.css'
+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()

frontend/auth/restricted/RestrictedApi.vue

@@ -0,0 +1,76 @@
+<template>
+  <RestrictedAuth
+    :mode="authMode"
+    :remote-auth-token="remoteAuthToken"
+    @authenticated="handleAuthenticated"
+    @back="handleBack"
+  />
+</template>
+
+<script setup>
+import { computed, 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
+}
+
+// Detect mode from URL hash fragment
+const authMode = computed(() => {
+  const params = new URLSearchParams(window.location.hash.slice(1))
+  const mode = params.get('mode')
+  if (mode === 'reauth') return 'reauth'
+  if (mode === 'forbidden') return 'forbidden'
+  return 'login'
+})
+
+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>

frontend/auth/restricted/index.html

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

frontend/auth/restricted/main.js

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

frontend/int/forward/RestrictedForward.vue

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

frontend/int/forward/index.html

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

frontend/int/forward/main.js

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

frontend/int/reset/ResetApp.vue

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

frontend/int/reset/index.html

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

frontend/int/reset/main.js

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

frontend/package.json

@@ -12,6 +12,7 @@
     "@simplewebauthn/browser": "^13.1.2",
     "pinia": "^3.0.3",
     "qrcode": "^1.5.4",
+    "sirv": "^3.0.2",
     "vue": "^3.5.17"
   },
   "devDependencies": {

frontend/src/App.vue

@@ -1,59 +0,0 @@
-<template>
-  <div>
-    <StatusMessage />
-    <LoginView v-if="store.currentView === 'login'" />
-    <ProfileView v-if="store.currentView === 'profile'" />
-    <DeviceLinkView v-if="store.currentView === 'device-link'" />
-    <ResetView v-if="store.currentView === 'reset'" />
-    <PermissionDeniedView v-if="store.currentView === 'permission-denied'" />
-  </div>
-</template>
-
-<script setup>
-import { onMounted } from 'vue'
-import { useAuthStore } from '@/stores/auth'
-import StatusMessage from '@/components/StatusMessage.vue'
-import LoginView from '@/components/LoginView.vue'
-import ProfileView from '@/components/ProfileView.vue'
-import DeviceLinkView from '@/components/DeviceLinkView.vue'
-import ResetView from '@/components/ResetView.vue'
-import PermissionDeniedView from '@/components/PermissionDeniedView.vue'
-
-const store = useAuthStore()
-
-onMounted(async () => {
-  // Detect restricted mode:
-  // We only allow full functionality on the exact /auth/ (or /auth) path.
-  // Any other path (including /, /foo, /auth/admin, etc.) is treated as restricted
-  // so the app will only show login or permission denied views.
-  const path = location.pathname
-  if (!(path === '/auth/' || path === '/auth')) {
-    store.setRestrictedMode(true)
-  }
-  // Load branding / settings first (non-blocking for auth flow)
-  await store.loadSettings()
-  // Was an error message passed in the URL hash?
-  const message = location.hash.substring(1)
-  if (message) {
-    store.showMessage(decodeURIComponent(message), 'error')
-    history.replaceState(null, '', location.pathname)
-  }
-  // Capture reset token from query parameter and then remove it
-  const params = new URLSearchParams(location.search)
-  const reset = params.get('reset')
-  if (reset) {
-    store.resetToken = reset
-    // Remove query param to avoid lingering in history / clipboard
-    const targetPath = '/auth/'
-    const currentPath = location.pathname.endsWith('/') ? location.pathname : location.pathname + '/'
-    history.replaceState(null, '', currentPath.startsWith('/auth') ? '/auth/' : targetPath)
-  }
-  try {
-    await store.loadUserInfo()
-  } catch (error) {
-    console.log('Failed to load user info:', error)
-    store.currentView = 'login'
-  }
-  store.selectView()
-})
-</script>

frontend/src/admin/AdminApp.vue

@@ -1,887 +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 { useAuthStore } from '@/stores/auth'
-
-const info = ref(null)
-const loading = ref(true)
-const error = ref(null)
-const orgs = ref([])
-const permissions = ref([])
-const currentOrgId = ref(null) // UUID of selected org for detail view
-const currentUserId = ref(null) // UUID for user detail view
-const userDetail = ref(null) // cached user detail object
-const userLink = ref(null) // latest generated registration link
-const userLinkExpires = ref(null)
-const authStore = useAuthStore()
-const addingOrgForPermission = ref(null)
-const PERMISSION_ID_PATTERN = '^[A-Za-z0-9:._~-]+$'
-const showCreatePermission = ref(false)
-const newPermId = ref('')
-const newPermName = ref('')
-const editingPermId = ref(null)
-const renameIdValue = ref('')
-const dialog = ref({ type: null, data: null, busy: false, error: '' })
-const safeIdRegex = /[^A-Za-z0-9:._~-]/g
-
-function sanitizeNewId() { if (newPermId.value) newPermId.value = newPermId.value.replace(safeIdRegex, '') }
-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 }
-    // Org-level permissions (direct)
-    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)
-    for (const r of o.roles) {
-      for (const pid of r.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)
-        }
-        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 availableOrgsForPermission(pid) {
-  return orgs.value.filter(o => !o.permissions.includes(pid))
-}
-
-function renamePermissionDisplay(p) { openDialog('perm-display', { permission: p }) }
-
-function startRenamePermissionId(p) { editingPermId.value = p.id; renameIdValue.value = p.id }
-function cancelRenameId() { editingPermId.value = null; renameIdValue.value = '' }
-async function submitRenamePermissionId(p) {
-  const newId = renameIdValue.value.trim()
-  if (!newId || newId === p.id) { cancelRenameId(); return }
-  try {
-    const body = { old_id: p.id, new_id: newId, display_name: p.display_name }
-    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})`)
-    await refreshPermissionsContext(); cancelRenameId()
-  } catch (e) { authStore.showMessage(e?.message || 'Rename failed') }
-}
-
-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}`
-      } 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 }) }
-
-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 loadOrgs()
-  } })
-}
-
-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 }) }
-
-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()
-  } })
-}
-
-// Permission actions
-async function submitCreatePermission() {
-  const id = newPermId.value.trim()
-  const name = newPermName.value.trim()
-  if (!id || !name) return
-  const res = await fetch('/auth/admin/permissions', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id, display_name: name }) })
-  const data = await res.json(); if (data.detail) { authStore.showMessage(data.detail); return }
-  await loadPermissions(); newPermId.value=''; newPermName.value=''; showCreatePermission.value=false
-}
-function cancelCreatePermission() { newPermId.value=''; newPermName.value=''; showCreatePermission.value=false }
-
-function updatePermission(p) { openDialog('perm-display', { permission: p }) }
-
-function deletePermission(p) {
-  openDialog('confirm', { message: `Delete permission ${p.id}?`, action: async () => {
-    const params = new URLSearchParams({ permission_id: p.id })
-    const res = await fetch(`/auth/admin/permission?${params.toString()}`, { method: 'DELETE' })
-    const data = await res.json(); if (data.detail) throw new Error(data.detail)
-    await loadPermissions()
-  } })
-}
-
-onMounted(async () => {
-  window.addEventListener('hashchange', parseHash)
-  await authStore.loadSettings()
-  if (authStore.settings?.rp_name) {
-    document.title = authStore.settings.rp_name + ' Admin'
-  }
-  load()
-})
-
-const selectedOrg = computed(() => orgs.value.find(o => o.uuid === currentOrgId.value) || null)
-
-function openOrg(o) {
-  window.location.hash = `#org/${o.uuid}`
-}
-
-function goOverview() {
-  window.location.hash = '#overview'
-}
-
-function openUser(u) {
-  window.location.hash = `#user/${u.uuid}`
-}
-
-const selectedUser = computed(() => {
-  if (!currentUserId.value) return null
-  for (const o of orgs.value) {
-    for (const r of o.roles) {
-      const u = r.users.find(x => x.uuid === currentUserId.value)
-      if (u) return { ...u, org_uuid: o.uuid, role_display_name: r.display_name }
-    }
-  }
-  return null
-})
-
-const pageHeading = computed(() => {
-  if (selectedUser.value) return 'Organization Admin'
-  if (selectedOrg.value) return 'Organization Admin'
-  return (authStore.settings?.rp_name || 'Passkey') + ' Admin'
-})
-
-// Breadcrumb entries for admin app.
-const breadcrumbEntries = computed(() => {
-  const entries = [
-    { label: 'Auth', href: '/auth/' },
-    { label: 'Admin', href: '/auth/admin/' }
-  ]
-  // 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 toggleRolePermission(role, permId, checked) {
-  // Build next permission list
-  const has = role.permissions.includes(permId)
-  if (checked && has) return
-  if (!checked && !has) return
-  const next = checked ? [...role.permissions, permId] : role.permissions.filter(p => p !== permId)
-  // Optimistic update
-  const prev = [...role.permissions]
-  role.permissions = next
-  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: next })
-    })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
-  } catch (e) {
-    authStore.showMessage(e.message || 'Failed to update role permission')
-    role.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 permsCsv = dialog.value.data.perms || ''
-      const perms = permsCsv.split(',').map(s=>s.trim()).filter(Boolean)
-  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: perms }) })
-      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 === 'perm-display') {
-      const { permission } = dialog.value.data; const display = dialog.value.data.display_name?.trim(); if (!display) throw new Error('Display name required')
-      const params = new URLSearchParams({ permission_id: permission.id, display_name: display })
-      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 === '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="container">
-    <h1>{{ pageHeading }}</h1>
-    <Breadcrumbs :entries="breadcrumbEntries" />
-    <div v-if="loading">Loading…</div>
-    <div v-else-if="error" class="error">{{ error }}</div>
-    <div v-else>
-      <div v-if="!info?.authenticated">
-        <p>You must be authenticated.</p>
-      </div>
-      <div v-else-if="!(info?.is_global_admin || info?.is_org_admin)">
-        <p>Insufficient permissions.</p>
-      </div>
-      <div v-else>
-
-        
-        
-  <div v-if="!selectedUser && !selectedOrg && (info.is_global_admin || info.is_org_admin)" class="card">
-          <h2>Organizations</h2>
-          <div class="actions">
-            <button @click="createOrg" v-if="info.is_global_admin">+ Create Org</button>
-          </div>
-          <table class="org-table">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Roles</th>
-                 <th>Members</th>
-                <th v-if="info.is_global_admin">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="o in orgs" :key="o.uuid">
-                <td><a href="#org/{{o.uuid}}" @click.prevent="openOrg(o)">{{ o.display_name }}</a></td>
-                <td>{{ o.roles.length }}</td>
-                <td>{{ o.roles.reduce((acc,r)=>acc + r.users.length,0) }}</td>
-                <td v-if="info.is_global_admin">
-                  <button @click="updateOrg(o)" class="icon-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
-                  <button @click="deleteOrg(o)" class="icon-btn delete-icon" aria-label="Delete organization" title="Delete organization">❌</button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <div v-if="selectedUser" class="card user-detail">
-          <UserBasicInfo
-            v-if="userDetail && !userDetail.error"
-            :name="userDetail.display_name || selectedUser.display_name"
-            :visits="userDetail.visits"
-            :created-at="userDetail.created_at"
-            :last-seen="userDetail.last_seen"
-            :loading="loading"
-            :org-display-name="userDetail.org.display_name"
-            :role-name="userDetail.role"
-            :update-endpoint="`/auth/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/display-name`"
-            @saved="onUserNameSaved"
-          />
-          <div v-else-if="userDetail?.error" class="error small">{{ userDetail.error }}</div>
-          <template v-if="userDetail && !userDetail.error">
-            <h3 class="cred-title">Registered Passkeys</h3>
-            <CredentialList :credentials="userDetail.credentials" :aaguid-info="userDetail.aaguid_info" />
-          </template>
-          <div class="actions">
-            <button @click="generateUserRegistrationLink(selectedUser)">Generate Registration Token</button>
-            <button @click="goOverview" v-if="info.is_global_admin" class="icon-btn" title="Overview">🏠</button>
-            <button @click="openOrg(selectedOrg)" v-if="selectedOrg" class="icon-btn" title="Back to Org">↩️</button>
-          </div>
-          <p class="matrix-hint muted">Use the token dialog to register a new credential for the member.</p>
-          <RegistrationLinkModal
-            v-if="showRegModal"
-            :endpoint="`/auth/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/create-link`"
-            :auto-copy="false"
-            @close="showRegModal = false"
-            @copied="onLinkCopied"
-          />
-        </div>
-
-        
-        <div v-else-if="selectedOrg" class="card">
-          <h2 class="org-title" :title="selectedOrg.uuid">
-            <span class="org-name">{{ selectedOrg.display_name }}</span>
-            <button @click="updateOrg(selectedOrg)" class="icon-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
-          </h2>
-          <div class="org-actions"></div>
-
-          <div class="matrix-wrapper">
-            <div class="matrix-scroll">
-              <div
-                class="perm-matrix-grid"
-                :style="{ gridTemplateColumns: 'minmax(180px, 1fr) ' + selectedOrg.roles.map(()=> '2.2rem').join(' ') + ' 2.2rem' }"
-              >
-                
-                <div class="grid-head perm-head">Permission</div>
-                <div
-                  v-for="r in selectedOrg.roles"
-                  :key="'head-' + r.uuid"
-                  class="grid-head role-head"
-                  :title="r.display_name"
-                >
-                  <span>{{ r.display_name }}</span>
-                </div>
-                <div class="grid-head role-head add-role-head" title="Add role" @click="createRole(selectedOrg)" role="button">➕</div>
-
-                
-                <template v-for="pid in selectedOrg.permissions" :key="pid">
-                  <div class="perm-name" :title="pid">{{ permissionDisplayName(pid) }}</div>
-                  <div
-                    v-for="r in selectedOrg.roles"
-                    :key="r.uuid + '-' + pid"
-                    class="matrix-cell"
-                  >
-                    <input
-                      type="checkbox"
-                      :checked="r.permissions.includes(pid)"
-                      @change="e => toggleRolePermission(r, pid, e.target.checked)"
-                    />
-                  </div>
-                  <div class="matrix-cell add-role-cell" />
-                </template>
-              </div>
-            </div>
-            <p class="matrix-hint muted">Toggle which permissions each role grants.</p>
-          </div>
-          <div class="roles-grid">
-            <div
-              v-for="r in selectedOrg.roles"
-              :key="r.uuid"
-              class="role-column"
-              @dragover="onRoleDragOver"
-              @drop="e => onRoleDrop(e, selectedOrg, r)"
-            >
-              <div class="role-header">
-                <strong class="role-name" :title="r.uuid">
-                  <span>{{ r.display_name }}</span>
-                  <button @click="updateRole(r)" class="icon-btn" aria-label="Edit role" title="Edit role">✏️</button>
-                </strong>
-                <div class="role-actions">
-                  <button @click="createUserInRole(selectedOrg, r)" class="plus-btn" aria-label="Add user" title="Add user">➕</button>
-                </div>
-              </div>
-              <template v-if="r.users.length > 0">
-                <ul class="user-list">
-                  <li
-                    v-for="u in r.users"
-                    :key="u.uuid"
-                    class="user-chip"
-                    draggable="true"
-                    @dragstart="e => onUserDragStart(e, u, selectedOrg.uuid)"
-                    @click="openUser(u)"
-                    :title="u.uuid"
-                  >
-                    <span class="name">{{ u.display_name }}</span>
-                    <span class="meta">{{ u.last_seen ? new Date(u.last_seen).toLocaleDateString() : '—' }}</span>
-                  </li>
-                </ul>
-              </template>
-              <div v-else class="empty-role">
-                <p class="empty-text muted">No members</p>
-                <button @click="deleteRole(r)" class="icon-btn delete-icon" aria-label="Delete empty role" title="Delete role">❌</button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div v-if="!selectedUser && !selectedOrg && (info.is_global_admin || info.is_org_admin)" class="card">
-          <h2>All Permissions</h2>
-          <div class="actions">
-            <button v-if="!showCreatePermission" @click="showCreatePermission = true">+ Create Permission</button>
-            <form v-else class="inline-form" @submit.prevent="submitCreatePermission">
-              <input v-model="newPermId" @input="sanitizeNewId" required :pattern="PERMISSION_ID_PATTERN" placeholder="permission id" title="Allowed: A-Za-z0-9:._~-" />
-              <input v-model="newPermName" required placeholder="display name" />
-              <button type="submit">Save</button>
-              <button type="button" @click="cancelCreatePermission">Cancel</button>
-            </form>
-          </div>
-          <div class="permission-grid">
-            <div class="perm-grid-head">Permission</div>
-            <div class="perm-grid-head">Orgs</div>
-            <div class="perm-grid-head center">Members</div>
-            <div class="perm-grid-head center">Actions</div>
-            <template v-for="p in [...permissions].sort((a,b)=> a.id.localeCompare(b.id))" :key="p.id">
-              <div class="perm-cell perm-name" :title="p.id">
-                <div class="perm-title-line">{{ p.display_name }}</div>
-                <div class="perm-id-line muted">{{ p.id }}</div>
-              </div>
-              <div class="perm-cell perm-orgs" :title="permissionSummary[p.id]?.orgs?.map(o=>o.display_name).join(', ') || ''">
-                <template v-if="permissionSummary[p.id]">
-                  <span class="org-pill" v-for="o in permissionSummary[p.id].orgs" :key="o.uuid">
-                    {{ o.display_name }}
-                    <button class="pill-x" @click.stop="detachPermissionFromOrg(p.id, o.uuid)" aria-label="Remove">×</button>
-                  </span>
-                </template>
-                <span class="org-add-wrapper">
-                  <button
-                    v-if="availableOrgsForPermission(p.id).length && addingOrgForPermission !== p.id"
-                    class="add-org-btn"
-                    @click.stop="addingOrgForPermission = p.id"
-                    aria-label="Add organization"
-                    title="Add organization"
-                  >➕</button>
-                  <div
-                    v-if="addingOrgForPermission === p.id"
-                    class="org-add-menu"
-                    tabindex="0"
-                    @keydown.escape.stop.prevent="addingOrgForPermission = null"
-                  >
-                    <div class="org-add-list">
-                      <button
-                        v-for="o in availableOrgsForPermission(p.id)"
-                        :key="o.uuid"
-                        class="org-add-item"
-                        @click.stop="attachPermissionToOrg(p.id, o.uuid); addingOrgForPermission = null"
-                      >{{ o.display_name }}</button>
-                    </div>
-                    <div class="org-add-footer">
-                      <button class="org-add-cancel" @click.stop="addingOrgForPermission = null" aria-label="Cancel">Cancel</button>
-                    </div>
-                  </div>
-                </span>
-              </div>
-              <div class="perm-cell perm-users center">{{ permissionSummary[p.id]?.userCount || 0 }}</div>
-              <div class="perm-cell perm-actions center">
-                <div class="perm-actions-inner" :class="{ editing: editingPermId === p.id }">
-                  <div class="actions-view">
-                    <button @click="renamePermissionDisplay(p)" class="icon-btn" aria-label="Change display name" title="Change display name">✏️</button>
-                    <button @click="startRenamePermissionId(p)" class="icon-btn" aria-label="Change id" title="Change id">🆔</button>
-                    <button @click="deletePermission(p)" class="icon-btn delete-icon" aria-label="Delete permission" title="Delete permission">❌</button>
-                  </div>
-                  <form class="inline-id-form overlay" @submit.prevent="submitRenamePermissionId(p)">
-                    <input v-model="renameIdValue" @input="sanitizeRenameId" required :pattern="PERMISSION_ID_PATTERN" class="id-input" title="Allowed: A-Za-z0-9:._~-" />
-                    <button type="submit" class="icon-btn" aria-label="Save">✔</button>
-                    <button type="button" class="icon-btn" @click="cancelRenameId" aria-label="Cancel">✖</button>
-                  </form>
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <StatusMessage />
-  <div v-if="dialog.type" class="modal-overlay" @keydown.esc.prevent.stop="closeDialog" tabindex="-1">
-    <div class="modal" role="dialog" aria-modal="true">
-      <h3 class="modal-title">
-        <template v-if="dialog.type==='org-create'">Create Organization</template>
-        <template v-else-if="dialog.type==='org-update'">Rename Organization</template>
-        <template v-else-if="dialog.type==='role-create'">Create Role</template>
-        <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==='perm-display'">Edit Permission Display</template>
-        <template v-else-if="dialog.type==='confirm'">Confirm</template>
-      </h3>
-      <form @submit.prevent="submitDialog" class="modal-form">
-        <template v-if="dialog.type==='org-create' || dialog.type==='org-update'">
-          <label>Name
-            <input v-model="dialog.data.name" :placeholder="dialog.type==='org-update'? dialog.data.org.display_name : 'Organization name'" required />
-          </label>
-        </template>
-        <template v-else-if="dialog.type==='role-create'">
-          <label>Role Name
-            <input v-model="dialog.data.name" placeholder="Role name" required />
-          </label>
-        </template>
-        <template v-else-if="dialog.type==='role-update'">
-          <label>Role Name
-            <input v-model="dialog.data.name" :placeholder="dialog.data.role.display_name" required />
-          </label>
-          <label>Permissions (comma separated)
-            <textarea v-model="dialog.data.perms" rows="2" placeholder="perm:a, perm:b"></textarea>
-          </label>
-        </template>
-        <template v-else-if="dialog.type==='user-create'">
-          <p class="small muted">Role: {{ dialog.data.role.display_name }}</p>
-          <label>Display Name
-            <input v-model="dialog.data.name" placeholder="User display name" required />
-          </label>
-        </template>
-        <template v-else-if="dialog.type==='perm-display'">
-          <p class="small muted">ID: {{ dialog.data.permission.id }}</p>
-            <label>Display Name
-              <input v-model="dialog.data.display_name" :placeholder="dialog.data.permission.display_name" required />
-            </label>
-        </template>
-        <template v-else-if="dialog.type==='confirm'">
-          <p>{{ dialog.data.message }}</p>
-        </template>
-        <div v-if="dialog.error" class="error small">{{ dialog.error }}</div>
-        <div class="modal-actions">
-          <button type="submit" :disabled="dialog.busy">{{ dialog.type==='confirm' ? 'OK' : 'Save' }}</button>
-          <button type="button" @click="closeDialog" :disabled="dialog.busy">Cancel</button>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.container { max-width: 960px; margin: 2rem auto; padding: 0 1rem; }
-.subtitle { color: #888 }
-.card { margin: 1rem 0; padding: 1rem; border: 1px solid #eee; border-radius: 8px; }
-.error { color: #a00 }
-.actions { margin-bottom: .5rem }
-.org { border-top: 1px dashed #eee; padding: .5rem 0 }
-.org-header { display: flex; gap: .5rem; align-items: baseline }
-.user-item { display: flex; gap: .5rem; margin: .15rem 0 }
-.users-table { width: 100%; border-collapse: collapse; margin-top: .25rem; }
-.users-table th, .users-table td { padding: .25rem .4rem; text-align: left; border-bottom: 1px solid #eee; font-weight: normal; }
-.users-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #555; }
-.users-table tbody tr:hover { background: #fafafa; }
-.org-actions, .role-actions, .perm-actions { display: flex; gap: .5rem; margin: .25rem 0 }
-.muted { color: #666 }
-.small { font-size: .9em }
-.pill-list { display: flex; flex-wrap: wrap; gap: .25rem }
-.pill { background: #f3f3f3; border: 1px solid #e2e2e2; border-radius: 999px; padding: .1rem .5rem; display: inline-flex; align-items: center; gap: .25rem }
-.pill-x { background: transparent; border: none; color: #900; cursor: pointer }
-button { padding: .25rem .5rem; border-radius: 6px; border: 1px solid #ddd; background: #fff; cursor: pointer }
-button:hover { background: #f7f7f7 }
-/* Avoid global button 100% width from frontend main styles */
-button, .perm-actions button, .org-actions button, .role-actions button { width: auto; }
-.roles-grid { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; padding: .5rem 0; }
-.role-column { background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: .5rem; min-width: 200px; flex: 1 1 240px; display: flex; flex-direction: column; max-width: 300px; }
-.role-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem }
-.user-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; flex: 1 1 auto; }
-.user-chip { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: .25rem .4rem; display: flex; justify-content: space-between; gap: .5rem; cursor: grab; }
-.user-chip:active { cursor: grabbing }
-.user-chip .name { font-weight: 500 }
-.user-chip .meta { font-size: .65rem; color: #666 }
-.role-column.drag-over { outline: 2px dashed #66a; }
-.org-table { width: 100%; border-collapse: collapse; }
-.org-table th, .org-table td { padding: .4rem .5rem; border-bottom: 1px solid #eee; text-align: left; }
-.org-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #555; }
-.org-table a { text-decoration: none; color: #0366d6; }
-.org-table a:hover { text-decoration: underline; }
-.nav-link { font-size: .6em; margin-left: .5rem; background: #eee; padding: .25em .6em; border-radius: 999px; border: 1px solid #ccc; text-decoration: none; }
-.nav-link:hover { background: #ddd; }
-.back-link { font-size: .5em; margin-left: .75rem; text-decoration: none; background: #eee; padding: .25em .6em; border-radius: 999px; border: 1px solid #ccc; vertical-align: middle; line-height: 1.2; }
-.back-link:hover { background: #ddd; }
-.matrix-wrapper { margin: 1rem 0; text-align: left; }
-.matrix-scroll { overflow-x: auto; text-align: left; }
-.perm-matrix-grid { display: inline-grid; gap: 0; align-items: stretch; margin-right: 4rem; }
-.perm-matrix-grid > * { background: #fff; border: none; padding: .35rem .4rem; font-size: .75rem; }
-.perm-matrix-grid .grid-head { background: transparent; border: none; font-size: .65rem; letter-spacing: .05em; font-weight: 600; text-transform: uppercase; display: flex; justify-content: center; align-items: flex-end; padding-bottom: .25rem; }
-.perm-matrix-grid .perm-head { justify-content: flex-start; align-items: flex-end; }
-.perm-matrix-grid .role-head span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .6rem; line-height: 1; }
-.perm-matrix-grid .perm-name { font-weight: 500; white-space: nowrap; text-align: left; }
-.perm-matrix-grid .matrix-cell { display: flex; justify-content: center; align-items: center; }
-.perm-matrix-grid .matrix-cell input { cursor: pointer; }
-.matrix-hint { font-size: .7rem; margin-top: .25rem; }
-/* Add role column styles */
-.add-role-head { cursor: pointer; color: #2a6; font-size: 1rem; display:flex; justify-content:center; align-items:flex-end; }
-.add-role-head:hover { color:#1c4; }
-/* Removed add-role placeholder styles */
-/* Inline organization title with icon */
-.org-title { display: flex; align-items: center; gap: .4rem; }
-.org-title .org-name { flex: 0 1 auto; }
-/* Plus button for adding users */
-.plus-btn { background: none; border: none; font-size: 1.15rem; line-height: 1; padding: 0 .1rem; cursor: pointer; opacity: .6; }
-.plus-btn:hover, .plus-btn:focus { opacity: 1; outline: none; }
-.plus-btn:focus-visible { outline: 2px solid #555; outline-offset: 2px; }
-.empty-role { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; padding: .35rem .25rem; /* removed flex grow & width for natural size */ }
-.empty-role .empty-text { font-size: .7rem; margin: 0; }
-.delete-icon { color: #c00; }
-.delete-icon:hover, .delete-icon:focus { color: #ff0000; }
-.user-detail .user-link-box { margin-top: .75rem; font-size: .7rem; background: #fff; border: 1px dashed #ccc; padding: .5rem; border-radius: 6px; cursor: pointer; word-break: break-all; }
-.user-detail .user-link-box:hover { background: #f9f9f9; }
-.user-detail .user-link-box .expires { font-size: .6rem; margin-top: .25rem; color: #555; }
-/* Minimal icon button for rename/edit actions */
-.icon-btn { background: none; border: none; padding: 0 .15rem; margin-left: .15rem; cursor: pointer; font-size: .8rem; line-height: 1; opacity: .55; vertical-align: middle; }
-.icon-btn:hover, .icon-btn:focus { opacity: .95; outline: none; }
-.icon-btn:focus-visible { outline: 2px solid #555; outline-offset: 2px; }
-.icon-btn:active { transform: translateY(1px); }
-.org-title { display: flex; align-items: baseline; gap: .25rem; }
-.role-name { display: inline-flex; align-items: center; gap: .15rem; font-weight: 600; }
-.perm-name-line { display: flex; align-items: center; gap: .15rem; }
-.user-meta { margin-top: .25rem; }
-.cred-title { margin-top: .75rem; font-size: .85rem; }
-.cred-list { list-style: none; padding: 0; margin: .25rem 0 .5rem; display: flex; flex-direction: column; gap: .35rem; }
-.cred-item { background: #fff; border: 1px solid #eee; border-radius: 6px; padding: .35rem .5rem; font-size: .65rem; }
-.cred-line { display: flex; flex-direction: column; gap: .15rem; }
-.cred-line .dates { color: #555; font-size: .6rem; }
-/* Permission grid */
-.permission-grid { display: grid; grid-template-columns: minmax(220px,2fr) minmax(160px,3fr) 70px 90px; gap: 2px; margin-top: .5rem; }
-.permission-grid .perm-grid-head { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; padding: .35rem .4rem; background: #f3f3f3; border: 1px solid #e1e1e1; }
-.permission-grid .perm-cell { background: #fff; border: 1px solid #eee; padding: .35rem .4rem; font-size: .7rem; display: flex; align-items: center; gap: .4rem; }
-.permission-grid .perm-name { flex-direction: row; flex-wrap: wrap; }
-.permission-grid .perm-name { flex-direction: column; align-items: flex-start; gap:2px; }
-.permission-grid .perm-title-line { font-weight:600; line-height:1.1; }
-.permission-grid .perm-id-line { font-size:.55rem; line-height:1.1; word-break:break-all; }
-.permission-grid .center { justify-content: center; }
-.permission-grid .perm-actions { gap: .25rem; }
-.permission-grid .perm-actions .icon-btn { font-size: .9rem; }
-/* Inline edit overlay to avoid layout shift */
-.perm-actions-inner { position: relative; display:flex; width:100%; justify-content:center; }
-.perm-actions-inner .inline-id-form.overlay { position:absolute; inset:0; display:none; align-items:center; justify-content:center; gap:.25rem; background:rgba(255,255,255,.9); backdrop-filter:blur(2px); padding:0 .15rem; }
-.perm-actions-inner.editing .inline-id-form.overlay { display:inline-flex; }
-.perm-actions-inner.editing .actions-view { visibility:hidden; }
-/* Inline forms */
-.inline-form, .inline-id-form { display:inline-flex; gap:.25rem; align-items:center; }
-.inline-form input, .inline-id-form input { padding:.25rem .4rem; font-size:.6rem; border:1px solid #ccc; border-radius:4px; }
-.inline-form button, .inline-id-form button { font-size:.6rem; padding:.3rem .5rem; }
-.inline-id-form .id-input { width:120px; }
-/* Modal */
-.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; justify-content:center; align-items:flex-start; padding-top:8vh; z-index:200; }
-.modal { background:#fff; border-radius:10px; padding:1rem 1.1rem; width: min(420px, 90%); box-shadow:0 10px 30px rgba(0,0,0,.25); animation:pop .18s ease; }
-@keyframes pop { from { transform:translateY(10px); opacity:0 } to { transform:translateY(0); opacity:1 } }
-.modal-title { margin:0 0 .65rem; font-size:1rem; }
-.modal-form { display:flex; flex-direction:column; gap:.65rem; }
-.modal-form label { display:flex; flex-direction:column; font-size:.65rem; gap:.25rem; font-weight:600; }
-.modal-form input, .modal-form textarea { border:1px solid #ccc; border-radius:6px; padding:.45rem .55rem; font-size:.7rem; font-weight:400; font-family:inherit; }
-.modal-form textarea { resize:vertical; }
-.modal-actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:.25rem; }
-.modal-actions button { font-size:.65rem; }
-/* Org pill editing */
-.perm-orgs { flex-wrap: wrap; gap: .25rem; }
-.perm-orgs .org-pill { background:#eef4ff; border:1px solid #d0dcf0; padding:2px 6px; border-radius:999px; font-size:.55rem; display:inline-flex; align-items:center; gap:4px; }
-.perm-orgs .org-pill .pill-x { background:none; border:none; cursor:pointer; font-size:.7rem; line-height:1; padding:0; margin:0; color:#555; }
-.perm-orgs .org-pill .pill-x:hover { color:#c00; }
-.add-org-btn { background:none; border:none; cursor:pointer; font-size:.7rem; padding:0 2px; line-height:1; opacity:.55; display:inline; }
-.add-org-btn:hover, .add-org-btn:focus { opacity:1; }
-.add-org-btn:focus-visible { outline:2px solid #555; outline-offset:2px; }
-.org-add-wrapper { position:relative; display:inline-block; }
-.org-add-menu { position:absolute; top:100%; left:0; z-index:20; margin-top:4px; min-width:160px; background:#fff; border:1px solid #e2e6ea; border-radius:6px; padding:.3rem .35rem; box-shadow:0 4px 10px rgba(0,0,0,.08); display:flex; flex-direction:column; gap:.25rem; font-size:.6rem; }
-.org-add-menu:before { content:""; position:absolute; top:-5px; left:10px; width:8px; height:8px; background:#fff; border-left:1px solid #e2e6ea; border-top:1px solid #e2e6ea; transform:rotate(45deg); }
-.org-add-list { display:flex; flex-direction:column; gap:0; max-height:180px; overflow-y:auto; scrollbar-width:thin; }
-.org-add-item { background:transparent; border:none; padding:.25rem .4rem; font-size:.6rem; border-radius:4px; cursor:pointer; line-height:1.1; text-align:left; width:100%; color:#222; }
-.org-add-item:hover, .org-add-item:focus { background:#f2f5f9; }
-.org-add-item:active { background:#e6ebf0; }
-.org-add-footer { margin-top:.25rem; display:flex; justify-content:flex-end; }
-.org-add-cancel { background:transparent; border:none; font-size:.55rem; padding:.15rem .35rem; cursor:pointer; color:#666; border-radius:4px; }
-.org-add-cancel:hover, .org-add-cancel:focus { background:#f2f5f9; color:#222; }
-.org-add-cancel:active { background:#e6ebf0; }
-</style>

frontend/src/admin/AdminDialogs.vue

@@ -0,0 +1,109 @@
+<script setup>
+import Modal from '@/components/Modal.vue'
+import NameEditForm from '@/components/NameEditForm.vue'
+
+const props = defineProps({
+  dialog: Object,
+  PERMISSION_ID_PATTERN: String
+})
+
+const emit = defineEmits(['submitDialog', 'closeDialog'])
+
+const NAME_EDIT_TYPES = new Set(['org-update', 'role-update', 'user-update-name'])
+</script>
+
+<template>
+  <Modal v-if="dialog.type" @close="$emit('closeDialog')">
+      <h3 class="modal-title">
+        <template v-if="dialog.type==='org-create'">Create Organization</template>
+        <template v-else-if="dialog.type==='org-update'">Rename Organization</template>
+        <template v-else-if="dialog.type==='role-create'">Create Role</template>
+        <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==='confirm'">Confirm</template>
+      </h3>
+      <form @submit.prevent="$emit('submitDialog')" class="modal-form">
+        <template v-if="dialog.type==='org-create'">
+          <label>Name
+            <input ref="nameInput" v-model="dialog.data.name" required />
+          </label>
+        </template>
+        <template v-else-if="dialog.type==='org-update'">
+          <NameEditForm
+            label="Organization Name"
+            v-model="dialog.data.name"
+            :busy="dialog.busy"
+            :error="dialog.error"
+            @cancel="$emit('closeDialog')"
+          />
+        </template>
+        <template v-else-if="dialog.type==='role-create'">
+          <label>Role Name
+            <input v-model="dialog.data.name" placeholder="Role name" required />
+          </label>
+        </template>
+        <template v-else-if="dialog.type==='role-update'">
+          <NameEditForm
+            label="Role Name"
+            v-model="dialog.data.name"
+            :busy="dialog.busy"
+            :error="dialog.error"
+            @cancel="$emit('closeDialog')"
+          />
+        </template>
+        <template v-else-if="dialog.type==='user-create'">
+          <p class="small muted">Role: {{ dialog.data.role.display_name }}</p>
+          <label>Display Name
+            <input v-model="dialog.data.name" placeholder="User display name" required />
+          </label>
+        </template>
+        <template v-else-if="dialog.type==='user-update-name'">
+          <NameEditForm
+            label="Display Name"
+            v-model="dialog.data.name"
+            :busy="dialog.busy"
+            :error="dialog.error"
+            @cancel="$emit('closeDialog')"
+          />
+        </template>
+        <template v-else-if="dialog.type==='perm-create' || dialog.type==='perm-display'">
+          <label>Display Name
+            <input ref="displayNameInput" v-model="dialog.data.display_name" required />
+          </label>
+          <label>Permission ID
+            <input v-model="dialog.data.id" :placeholder="dialog.type === 'perm-create' ? 'yourapp:permission' : dialog.data.permission.id" 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>
+        </template>
+        <template v-else-if="dialog.type==='confirm'">
+          <p>{{ dialog.data.message }}</p>
+        </template>
+        <div v-if="dialog.error && !NAME_EDIT_TYPES.has(dialog.type)" class="error small">{{ dialog.error }}</div>
+        <div v-if="!NAME_EDIT_TYPES.has(dialog.type)" class="modal-actions">
+          <button
+            type="button"
+            class="btn-secondary"
+            @click="$emit('closeDialog')"
+            :disabled="dialog.busy"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            class="btn-primary"
+            :disabled="dialog.busy"
+          >
+            {{ dialog.type==='confirm' ? 'OK' : 'Save' }}
+          </button>
+        </div>
+      </form>
+  </Modal>
+</template>
+
+<style scoped>
+.error { color: var(--color-danger-text); }
+.small { font-size: 0.9rem; }
+.muted { color: var(--color-text-muted); }
+</style>

frontend/src/admin/AdminOrgDetail.vue

@@ -0,0 +1,411 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { getDirection, navigateButtonRow, focusPreferred } from '@/utils/keynav'
+
+const props = defineProps({
+  selectedOrg: Object,
+  permissions: Array,
+  navigationDisabled: { type: Boolean, default: false }
+})
+
+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) => {
+    const nameA = a.display_name.toLowerCase()
+    const nameB = b.display_name.toLowerCase()
+    if (nameA !== nameB) {
+      return nameA.localeCompare(nameB)
+    }
+    return a.uuid.localeCompare(b.uuid)
+  })
+})
+
+function permissionDisplayName(id) {
+  return props.permissions.find(p => p.id === id)?.display_name || id
+}
+
+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" 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" ref="permMatrixRef" @keydown="handleMatrixKeydown">
+      <div class="matrix-scroll">
+        <div
+          class="perm-matrix-grid"
+          :style="{ gridTemplateColumns: 'minmax(180px, 1fr) ' + sortedRoles.map(()=> '2.2rem').join(' ') + ' 2.2rem' }"
+        >
+          <div class="grid-head perm-head">Permission</div>
+          <div
+            v-for="r in sortedRoles"
+            :key="'head-' + r.uuid"
+            class="grid-head role-head"
+            :title="r.display_name"
+          >
+            <span>{{ r.display_name }}</span>
+          </div>
+          <div class="grid-head role-head add-role-head" title="Add role" @click="$emit('createRole', selectedOrg)" role="button" tabindex="0" @keydown.enter="$emit('createRole', selectedOrg)">➕</div>
+
+          <template v-for="pid in selectedOrg.permissions" :key="pid">
+            <div class="perm-name" :title="pid">{{ permissionDisplayName(pid) }}</div>
+            <div
+              v-for="r in sortedRoles"
+              :key="r.uuid + '-' + pid"
+              class="matrix-cell"
+            >
+              <input
+                type="checkbox"
+                :checked="r.permissions.includes(pid)"
+                @change="e => toggleRolePermission(r, pid, e.target.checked)"
+              />
+            </div>
+            <div class="matrix-cell add-role-cell" />
+          </template>
+        </div>
+      </div>
+      <p class="matrix-hint muted">Toggle which permissions each role grants.</p>
+    </div>
+    <div class="roles-grid" ref="rolesGridRef">
+      <div
+        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" @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>
+          </strong>
+          <div class="role-actions">
+            <button @click="$emit('createUserInRole', selectedOrg, r)" class="plus-btn" aria-label="Add user" title="Add user">➕</button>
+          </div>
+        </div>
+        <template v-if="r.users.length > 0">
+          <ul class="user-list" @keydown="handleUserListKeydown">
+            <li
+              v-for="u in r.users.slice().sort((a, b) => {
+                const nameA = a.display_name.toLowerCase()
+                const nameB = b.display_name.toLowerCase()
+                if (nameA !== nameB) {
+                  return nameA.localeCompare(nameB)
+                }
+                return a.uuid.localeCompare(b.uuid)
+              })"
+              :key="u.uuid"
+              class="user-chip"
+              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>
+              <span class="meta">{{ u.last_seen ? new Date(u.last_seen).toLocaleDateString() : '—' }}</span>
+            </li>
+          </ul>
+        </template>
+        <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>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+.card.surface { padding: var(--space-lg); }
+.org-title { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
+.org-name { font-size: 1.5rem; font-weight: 600; color: var(--color-heading); }
+.icon-btn { background: none; border: none; color: var(--color-text-muted); padding: 0.2rem; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
+.icon-btn:hover { color: var(--color-heading); background: var(--color-surface-muted); }
+.matrix-wrapper { margin: var(--space-md) 0; padding: var(--space-lg); }
+.matrix-scroll { overflow-x: auto; }
+.matrix-hint { font-size: 0.8rem; color: var(--color-text-muted); }
+.perm-matrix-grid { display: inline-grid; gap: 0.25rem; align-items: stretch; }
+.perm-matrix-grid > * { padding: 0.35rem 0.45rem; font-size: 0.75rem; }
+.perm-matrix-grid .grid-head { color: var(--color-text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; }
+.perm-matrix-grid .perm-head { display: flex; align-items: flex-end; justify-content: flex-start; padding: 0.35rem 0.45rem; font-size: 0.75rem; }
+.perm-matrix-grid .role-head { display: flex; align-items: flex-end; justify-content: center; }
+.perm-matrix-grid .role-head span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.65rem; }
+.perm-matrix-grid .add-role-head { cursor: pointer; }
+.perm-name { font-weight: 600; color: var(--color-heading); padding: 0.35rem 0.45rem; font-size: 0.75rem; }
+.roles-grid { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); }
+.role-column { flex: 1; min-width: 200px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); }
+.role-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
+.role-name { display: flex; align-items: center; gap: var(--space-xs); font-size: 1.1rem; color: var(--color-heading); }
+.role-actions { display: flex; gap: var(--space-xs); }
+.plus-btn { background: var(--color-accent-soft); color: var(--color-accent); border: none; border-radius: var(--radius-sm); padding: 0.25rem 0.45rem; font-size: 1.1rem; cursor: pointer; }
+.plus-btn: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; }
+.delete-icon { color: var(--color-danger); }
+.delete-icon:hover { background: var(--color-danger-bg); color: var(--color-danger-text); }
+.muted { color: var(--color-text-muted); }
+
+@media (max-width: 720px) {
+  .roles-grid { flex-direction: column; }
+}
+</style>

frontend/src/admin/AdminOverview.vue

@@ -0,0 +1,379 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { getDirection, navigateButtonRow, focusPreferred, focusAtIndex } from '@/utils/keynav'
+
+const props = defineProps({
+  info: Object,
+  orgs: Array,
+  permissions: Array,
+  permissionSummary: Object,
+  navigationDisabled: { type: Boolean, default: false }
+})
+
+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)))
+
+function permissionDisplayName(id) {
+  return props.permissions.find(p => p.id === id)?.display_name || id
+}
+
+function getRoleNames(org) {
+  return org.roles
+    .slice()
+    .sort((a, b) => a.display_name.localeCompare(b.display_name))
+    .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' && props.info.is_global_admin) {
+      // 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 (props.info.is_global_admin) {
+    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" ref="orgSection">
+    <h2>{{ info.is_global_admin ? 'Organizations' : 'Your Organizations' }}</h2>
+    <div class="actions" ref="orgActionsRef" @keydown="handleOrgActionsKeydown">
+      <button v-if="info.is_global_admin" @click="$emit('createOrg')">+ Create Org</button>
+    </div>
+    <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>
+        </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>
+          </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">
+            <button @click="$emit('deleteOrg', o)" class="icon-btn delete-icon" aria-label="Delete organization" title="Delete organization">❌</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div v-if="info.is_global_admin" class="permissions-section">
+    <h2>Permissions</h2>
+    <div class="matrix-wrapper" ref="permMatrixRef" @keydown="handleMatrixKeydown">
+      <div class="matrix-scroll">
+        <div
+          class="perm-matrix-grid"
+          :style="{ gridTemplateColumns: 'minmax(180px, 1fr) ' + sortedOrgs.map(()=> '2.2rem').join(' ') }"
+        >
+          <div class="grid-head perm-head">Permission</div>
+          <div
+            v-for="o in sortedOrgs"
+            :key="'head-' + o.uuid"
+            class="grid-head org-head"
+            :title="o.display_name"
+          >
+            <span>{{ o.display_name }}</span>
+          </div>
+
+          <template v-for="p in sortedPermissions" :key="p.id">
+            <div class="perm-name" :title="p.id">
+              <span class="display-text">{{ p.display_name }}</span>
+            </div>
+            <div
+              v-for="o in sortedOrgs"
+              :key="o.uuid + '-' + p.id"
+              class="matrix-cell"
+            >
+              <input
+                type="checkbox"
+                :checked="o.permissions.includes(p.id)"
+                @change="e => $emit('toggleOrgPermission', o, p.id, e.target.checked)"
+              />
+            </div>
+          </template>
+        </div>
+      </div>
+      <p class="matrix-hint muted">Toggle which permissions each organization can grant to its members.</p>
+    </div>
+    <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>
+    </div>
+    <table class="org-table" ref="permTableRef" @keydown="e => handleTableKeydown(e, 'perm')">
+        <thead>
+          <tr>
+            <th scope="col">Permission</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">
+            <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>
+              </div>
+              <div class="perm-id-info">
+                <span class="id-text">{{ p.id }}</span>
+              </div>
+            </td>
+            <td class="perm-members center">{{ permissionSummary[p.id]?.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>
+          </tr>
+        </tbody>
+      </table>
+  </div>
+</template>
+
+<style scoped>
+.permissions-section { margin-bottom: var(--space-xl); }
+.permissions-section h2 { margin-bottom: var(--space-md); }
+.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
+.actions button { width: auto; }
+.org-table a { text-decoration: none; color: var(--color-link); }
+.org-table a:hover { text-decoration: underline; }
+.org-table .center { width: 6rem; min-width: 6rem; }
+.org-table .role-names { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.perm-name-cell { display: flex; flex-direction: column; gap: 0.3rem; }
+.perm-title { font-weight: 600; color: var(--color-heading); }
+.perm-id-info { font-size: 0.8rem; color: var(--color-text-muted); }
+.icon-btn { background: none; border: none; color: var(--color-text-muted); padding: 0.2rem; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
+.icon-btn:hover { color: var(--color-heading); background: var(--color-surface-muted); }
+.delete-icon { color: var(--color-danger); }
+.delete-icon:hover { background: var(--color-danger-bg); color: var(--color-danger-text); }
+.matrix-wrapper { margin: var(--space-md) 0; padding: var(--space-lg); }
+.matrix-scroll { overflow-x: auto; }
+.matrix-hint { font-size: 0.8rem; color: var(--color-text-muted); }
+.perm-matrix-grid { display: inline-grid; gap: 0.25rem; align-items: stretch; }
+.perm-matrix-grid > * { padding: 0.35rem 0.45rem; font-size: 0.75rem; }
+.perm-matrix-grid .grid-head { color: var(--color-text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; }
+.perm-matrix-grid .perm-head { display: flex; align-items: flex-end; justify-content: flex-start; padding: 0.35rem 0.45rem; font-size: 0.75rem; }
+.perm-matrix-grid .org-head { display: flex; align-items: flex-end; justify-content: center; }
+.perm-matrix-grid .org-head span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.65rem; }
+.perm-name { font-weight: 600; color: var(--color-heading); padding: 0.35rem 0.45rem; font-size: 0.75rem; }
+.display-text { margin-right: var(--space-xs); }
+.edit-display-btn { padding: 0.1rem 0.2rem; font-size: 0.8rem; }
+.edit-org-btn { padding: 0.1rem 0.2rem; font-size: 0.8rem; margin-left: var(--space-xs); }
+.perm-actions { text-align: center; }
+.center { text-align: center; }
+.muted { color: var(--color-text-muted); }
+</style>

frontend/src/admin/AdminUserDetail.vue

@@ -0,0 +1,261 @@
+<script setup>
+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 '@/utils/api'
+import { getDirection, navigateButtonRow, focusPreferred, focusAtIndex } from '@/utils/keynav'
+
+const props = defineProps({
+  selectedUser: Object,
+  userDetail: Object,
+  selectedOrg: Object,
+  loading: Boolean,
+  showRegModal: Boolean,
+  navigationDisabled: { type: Boolean, default: false }
+})
+
+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! Send it to ${props.selectedUser.display_name}.`)
+  emit('closeRegModal')
+}
+
+function handleEditName() {
+  emit('editUserName', props.selectedUser)
+}
+
+async function handleDelete(credential) {
+  try {
+    const data = await apiJson(`/auth/api/admin/orgs/${props.selectedUser.org_uuid}/users/${props.selectedUser.uuid}/credentials/${credential.credential_uuid}`, { method: 'DELETE' })
+    if (data.status === 'ok') {
+      emit('onUserNameSaved') // Reuse to refresh user detail
+    } else {
+      console.error('Failed to delete credential', data)
+    }
+  } catch (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_uuid}/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"
+        :visits="userDetail.visits"
+        :created-at="userDetail.created_at"
+        :last-seen="userDetail.last_seen"
+        :loading="loading"
+        :org-display-name="userDetail.org.display_name"
+        :role-name="userDetail.role"
+        :update-endpoint="`/auth/api/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/display-name`"
+        @saved="$emit('onUserNameSaved')"
+        @edit-name="handleEditName"
+      />
+    </div>
+    <div v-if="userDetail?.error" class="error small">{{ userDetail.error }}</div>
+    <template v-if="userDetail && !userDetail.error">
+      <div class="registration-actions" ref="regActionsRef" @keydown="handleRegActionsKeydown">
+        <button
+          class="btn-secondary reg-token-btn"
+          @click="$emit('generateUserRegistrationLink', selectedUser)"
+          :disabled="loading"
+        >Generate Registration Token</button>
+        <p class="matrix-hint muted">
+          Generate a one-time registration link so this user can register or add another passkey.
+          Copy the link from the dialog and send it to the user, or have the user scan the QR code on their device.
+        </p>
+      </div>
+      <section class="section-block" data-section="registered-passkeys">
+        <div class="section-header">
+          <h2>Registered Passkeys</h2>
+        </div>
+        <div class="section-body">
+          <CredentialList
+            ref="credentialListRef"
+            :credentials="userDetail.credentials"
+            :aaguid-info="userDetail.aaguid_info"
+            :allow-delete="true"
+            :hovered-credential-uuid="hoveredCredentialUuid"
+            :hovered-session-credential-uuid="hoveredSession?.credential_uuid"
+            :navigation-disabled="hasActiveModal"
+            @delete="handleDelete"
+            @credential-hover="hoveredCredentialUuid = $event"
+            @navigate-out="handleCredentialNavigateOut"
+          />
+        </div>
+      </section>
+      <SessionList
+        ref="sessionListRef"
+        :sessions="userDetail.sessions || []"
+        :terminating-sessions="terminatingSessions"
+        :hovered-credential-uuid="hoveredCredentialUuid"
+        :navigation-disabled="hasActiveModal"
+        :empty-message="'This user has no active sessions.'"
+        :section-description="'View and manage the active sessions for this user.'"
+        @terminate="handleTerminateSession"
+        @session-hover="hoveredSession = $event"
+        @navigate-out="handleSessionNavigateOut"
+      />
+    </template>
+    <div class="actions ancillary-actions" ref="backButtonRef" @keydown="handleBackButtonKeydown">
+      <button v-if="selectedOrg" @click="$emit('openOrg', selectedOrg)" class="icon-btn" title="Back to Org">↩️</button>
+    </div>
+    <RegistrationLinkModal
+      v-if="showRegModal"
+      :endpoint="`/auth/api/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/create-link`"
+      :user-name="userDetail?.display_name || selectedUser.display_name"
+      @close="$emit('closeRegModal')"
+      @copied="onLinkCopied"
+    />
+  </div>
+</template>
+
+<style scoped>
+.user-detail { display: flex; flex-direction: column; gap: var(--space-lg); }
+.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
+.ancillary-actions { margin-top: -0.5rem; }
+.reg-token-btn { align-self: flex-start; }
+.registration-actions { display: flex; flex-direction: column; gap: 0.5rem; }
+.icon-btn { background: none; border: none; color: var(--color-text-muted); padding: 0.2rem; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
+.icon-btn:hover { color: var(--color-heading); background: var(--color-surface-muted); }
+.matrix-hint { font-size: 0.8rem; color: var(--color-text-muted); }
+.error { color: var(--color-danger-text); }
+.small { font-size: 0.9rem; }
+.muted { color: var(--color-text-muted); }
+</style>

frontend/src/components/AccessDenied.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="message-container">
+    <div class="message-content">
+      <h2>🔒 Access Denied</h2>
+      <div class="button-row">
+        <button class="btn-secondary" @click="goBack">Back</button>
+        <button class="btn-primary" @click="$emit('reload')">Reload Page</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { goBack } from '@/utils/helpers'
+
+defineEmits(['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 1.5rem;
+  color: var(--color-heading);
+}
+
+.message-content .button-row {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+}
+</style>

frontend/src/components/Breadcrumbs.vue

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

frontend/src/components/CredentialList.vue

@@ -1,15 +1,25 @@
 <template>
-  <div class="credential-list">
+  <div class="credential-list" tabindex="0" @focusin="handleListFocus" @keydown="handleListKeydown">
     <div v-if="loading"><p>Loading credentials...</p></div>
     <div v-else-if="!credentials?.length"><p>No passkeys found.</p></div>
-    <div v-else>
+    <template v-else>
       <div
         v-for="credential in credentials"
         :key="credential.credential_uuid"
-        :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_uuid,
+          'is-linked-session': hoveredSessionCredentialUuid === credential.credential_uuid
+        }]"
+        tabindex="-1"
+        @mousedown.prevent
+        @click.capture="handleCardClick"
+        @focusin="handleCredentialFocus(credential.credential_uuid)"
+        @focusout="handleCredentialBlur($event)"
+        @keydown="handleItemKeydown($event, credential)"
       >
-        <div class="credential-header">
-          <div class="credential-icon">
+        <div class="item-top">
+          <div class="item-icon">
             <img
               v-if="getCredentialAuthIcon(credential)"
               :src="getCredentialAuthIcon(credential)"
@@ -20,40 +30,115 @@
             >
             <span v-else class="auth-emoji">🔑</span>
           </div>
-          <div class="credential-info">
-            <h4>{{ getCredentialAuthName(credential) }}</h4>
+          <h4 class="item-title">{{ getCredentialAuthName(credential) }}</h4>
+          <div class="item-actions">
+            <span v-if="credential.is_current_session && !hoveredCredentialUuid && !hoveredSessionCredentialUuid" class="badge badge-current">Current</span>
+            <span v-else-if="hoveredCredentialUuid === credential.credential_uuid" class="badge badge-current">Selected</span>
+            <span v-else-if="hoveredSessionCredentialUuid === credential.credential_uuid" class="badge badge-current">Linked</span>
+            <button
+              v-if="allowDelete"
+              @click="$emit('delete', credential)"
+              class="btn-card-delete"
+              :disabled="credential.is_current_session"
+              :title="credential.is_current_session ? 'Cannot delete current session credential' : 'Delete passkey and terminate any linked sessions.'"
+              tabindex="-1"
+            >❌</button>
           </div>
+        </div>
+        <div class="item-details">
           <div class="credential-dates">
             <span class="date-label">Created:</span>
             <span class="date-value">{{ formatDate(credential.created_at) }}</span>
-            <span class="date-label" v-if="credential.last_used">Last used:</span>
-            <span class="date-value" v-if="credential.last_used">{{ formatDate(credential.last_used) }}</span>
-          </div>
-          <div class="credential-actions" v-if="allowDelete">
-            <button
-              @click="$emit('delete', credential)"
-              class="btn-delete-credential"
-              :disabled="credential.is_current_session"
-              :title="credential.is_current_session ? 'Cannot delete current session credential' : 'Delete passkey'"
-            >🗑️</button>
-          </div>
-        </div>
+            <span class="date-label">Last used:</span>
+            <span class="date-value">{{ formatDate(credential.last_used) }}</span>
+            <span class="date-label">Last verified:</span>
+            <span class="date-value">{{ formatDate(credential.last_verified) }}</span>
           </div>
         </div>
       </div>
     </template>
+  </div>
+</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'
@@ -68,17 +153,11 @@ const getCredentialAuthIcon = (credential) => {
 }
 </script>
 
-<style scoped>
-.credential-list { display: flex; flex-direction: column; gap: .75rem; margin-top: .5rem; }
-.credential-item { border: 1px solid #ddd; border-radius: 8px; padding: .5rem .75rem; background: #fff; }
-.credential-header { display: flex; align-items: center; gap: 1rem; }
-.credential-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
-.auth-icon { border-radius: 6px; }
-.credential-info { flex: 1 1 auto; }
-.credential-info h4 { margin: 0; font-size: .9rem; }
-.credential-dates { display: grid; grid-auto-flow: column; gap: .4rem; font-size: .65rem; align-items: center; }
-.date-label { font-weight: 600; }
-.credential-actions { margin-left: auto; }
-.btn-delete-credential { background: none; border: none; cursor: pointer; font-size: .9rem; }
-.btn-delete-credential:disabled { opacity: .3; cursor: not-allowed; }
+<style>
+.btn-card-delete {
+  display: none;
+}
+.credential-item:focus .btn-card-delete {
+  display: block;
+}
 </style>

frontend/src/components/DeviceLinkView.vue

@@ -1,67 +0,0 @@
-<template>
-  <div class="container">
-    <div class="view active">
-      <h1>📱 Add Another Device</h1>
-      <div class="device-link-section">
-        <div class="qr-container">
-          <a :href="url" id="deviceLinkText" @click="copyLink">
-            <canvas id="qrCode" class="qr-code"></canvas>
-            <p v-if="url">
-              {{ url.replace(/^[^:]+:\/\//, '') }}
-            </p>
-            <p v-else>
-              <em>Generating link...</em>
-            </p>
-          </a>
-          <p>
-            <strong>Scan and visit the URL on another device.</strong><br>
-            <small>⚠️ Expires in 24 hours and can only be used once.</small>
-          </p>
-        </div>
-      </div>
-
-      <button @click="authStore.currentView = 'profile'" class="btn-secondary">
-        Back to Profile
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { useAuthStore } from '@/stores/auth'
-import QRCode from 'qrcode/lib/browser'
-
-const authStore = useAuthStore()
-const url = ref(null)
-
-const copyLink = async (event) => {
-  event.preventDefault()
-  if (url.value) {
-    await navigator.clipboard.writeText(url.value)
-    authStore.showMessage('Link copied to clipboard!')
-    authStore.currentView = 'profile'
-  }
-}
-
-onMounted(async () => {
-  try {
-  const response = await fetch('/auth/api/create-link', { method: 'POST' })
-    const result = await response.json()
-    if (result.detail) throw new Error(result.detail)
-
-    url.value = result.url
-
-    // Generate QR code
-    const qrCodeElement = document.getElementById('qrCode')
-    if (qrCodeElement) {
-      QRCode.toCanvas(qrCodeElement, url.value, {scale: 8 }, error => {
-        if (error) console.error('Failed to generate QR code:', error)
-      })
-    }
-  } catch (error) {
-    authStore.showMessage(`Failed to create device link: ${error.message}`, 'error')
-    authStore.currentView = 'profile'
-  }
-})
-</script>

frontend/src/components/HostProfileView.vue

@@ -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="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" 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 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(() => {
+  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>

frontend/src/components/LoadingView.vue

@@ -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>

frontend/src/components/LoginView.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="container">
-    <div class="view active">
-  <h1>🔐 {{ (authStore.settings?.rp_name || 'Passkey') + ' Login' }}</h1>
-      <form @submit.prevent="handleLogin">
-        <button
-          type="submit"
-          class="btn-primary"
-          :disabled="authStore.isLoading"
-        >
-          {{ authStore.isLoading ? 'Authenticating...' : 'Login with Your Device' }}
-        </button>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useAuthStore } from '@/stores/auth'
-import { computed } from 'vue'
-
-const authStore = useAuthStore()
-
-const handleLogin = async () => {
-  try {
-    console.log('Login button clicked')
-    authStore.showMessage('Starting authentication...', 'info')
-    await authStore.authenticate()
-    authStore.showMessage('Authentication successful!', 'success', 2000)
-    if (authStore.restrictedMode) {
-      // Restricted mode: reload so the app re-mounts and selectView() applies (will become permission denied)
-      location.reload()
-    } else if (location.pathname === '/auth/') {
-      authStore.currentView = 'profile'
-    } else {
-      location.reload()
-    }
-  } catch (error) {
-    authStore.showMessage(error.message, 'error')
-  }
-}
-</script>

frontend/src/components/Modal.vue

@@ -0,0 +1,215 @@
+<template>
+  <dialog ref="dialog" @close="$emit('close')" @keydown="handleDialogKeydown">
+    <slot />
+  </dialog>
+</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>
+dialog {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  padding: calc(var(--space-lg) - var(--space-xs));
+  max-width: 500px;
+  width: min(500px, 90vw);
+  max-height: 90vh;
+  overflow-y: auto;
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  height: fit-content;
+}
+
+dialog::backdrop {
+  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);
+}
+
+dialog :deep(form) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+dialog :deep(.modal-form) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+dialog :deep(.modal-form label) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  font-weight: 500;
+}
+
+dialog :deep(.modal-form input),
+dialog :deep(.modal-form textarea) {
+  padding: var(--space-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-size: 1rem;
+  line-height: 1.4;
+  min-height: 2.5rem;
+}
+
+dialog :deep(.modal-form input:focus),
+dialog :deep(.modal-form textarea:focus) {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px #c7d2fe;
+}
+
+dialog :deep(.modal-actions) {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-sm);
+  margin-top: var(--space-md);
+  margin-bottom: var(--space-xs);
+}
+</style>

frontend/src/components/NameEditForm.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="name-edit-form">
+    <label :for="resolvedInputId">{{ label }}
+      <input
+        :id="resolvedInputId"
+        ref="inputRef"
+        :type="inputType"
+        :placeholder="placeholder"
+        v-model="localValue"
+        :disabled="busy"
+        required
+      />
+    </label>
+    <div v-if="error" class="error small">{{ error }}</div>
+    <div class="modal-actions" @keydown="handleActionsKeydown">
+      <button
+        type="button"
+        class="btn-secondary"
+        @click="handleCancel"
+        :disabled="busy"
+      >
+        {{ cancelText }}
+      </button>
+      <button
+        type="submit"
+        class="btn-primary"
+        :disabled="busy"
+        data-nav-primary
+      >
+        {{ submitText }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { getDirection } from '@/utils/keynav'
+
+const props = defineProps({
+  modelValue: { type: String, default: '' },
+  label: { type: String, default: 'Name' },
+  placeholder: { type: String, default: '' },
+  submitText: { type: String, default: 'Save' },
+  cancelText: { type: String, default: 'Cancel' },
+  busy: { type: Boolean, default: false },
+  error: { type: String, default: '' },
+  autoFocus: { type: Boolean, default: true },
+  autoSelect: { type: Boolean, default: true },
+  inputId: { type: String, default: null },
+  inputType: { type: String, default: 'text' }
+})
+
+const emit = defineEmits(['update:modelValue', 'cancel'])
+const inputRef = ref(null)
+const generatedId = `name-edit-${Math.random().toString(36).slice(2, 10)}`
+
+const localValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const resolvedInputId = computed(() => props.inputId || generatedId)
+
+const handleActionsKeydown = (event) => {
+  const direction = getDirection(event)
+  if (direction === 'up') {
+    event.preventDefault()
+    inputRef.value?.focus()
+    return
+  }
+  // Left/right navigation is handled globally by keynav
+}
+
+function handleCancel() {
+  emit('cancel')
+}
+
+</script>
+
+<style scoped>
+.name-edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.error {
+  color: var(--color-danger-text);
+}
+
+.small {
+  font-size: 0.9rem;
+}
+</style>

frontend/src/components/PermissionDeniedView.vue

@@ -1,43 +0,0 @@
-<template>
-  <div class="container">
-    <div class="view active">
-      <h1>🚫 Forbidden</h1>
-      <div v-if="authStore.userInfo?.authenticated" class="user-header">
-        <span class="user-emoji" aria-hidden="true">{{ userEmoji }}</span>
-        <span class="user-name">{{ displayName }}</span>
-      </div>
-      <p>You lack the permissions required for this page.</p>
-      <div class="actions">
-        <button class="btn-secondary" @click="back">Back</button>
-        <button class="btn-primary" @click="goAuth">Account</button>
-        <button class="btn-danger" @click="logout">Logout</button>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import { useAuthStore } from '@/stores/auth'
-
-const authStore = useAuthStore()
-
-const userEmoji = '👤' // Placeholder / could be extended later if backend provides one
-const displayName = authStore.userInfo?.user?.user_name || 'User'
-
-function goAuth() {
-  location.href = '/auth/'
-}
-function back() {
-  if (history.length > 1) history.back()
-  else authStore.currentView = 'login'
-}
-async function logout() {
-  await authStore.logout()
-}
-</script>
-<style scoped>
-.user-header { display:flex; align-items:center; gap:.5rem; font-size:1.1rem; margin-bottom:.75rem; }
-.user-emoji { font-size:1.5rem; line-height:1; }
-.user-name { font-weight:600; }
-.actions { margin-top:1.5rem; display:flex; gap:.5rem; flex-wrap:nowrap; }
-.hint { font-size:.9rem; opacity:.85; }
-</style>

frontend/src/components/ProfileView.vue

@@ -1,10 +1,15 @@
 <template>
-  <div class="container">
-    <div class="view active">
-      <h1>👋 Welcome!</h1>
-      <Breadcrumbs :entries="[{ label: 'Auth', href: '/auth/' }, ...(isAdmin ? [{ label: 'Admin', href: '/auth/admin/' }] : [])]" />
+  <section class="view-root" data-view="profile">
+    <header class="view-header">
+      <h1>User Profile</h1>
+      <Breadcrumbs ref="breadcrumbs" :entries="breadcrumbEntries" @keydown="handleBreadcrumbKeydown" />
+      <p class="view-lede">Account dashboard for managing credentials and authenticating with other devices.</p>
+    </header>
+
+    <section class="section-block" ref="userInfoSection">
       <UserBasicInfo
         v-if="authStore.userInfo?.user"
+        ref="userBasicInfo"
         :name="authStore.userInfo.user.user_name"
         :visits="authStore.userInfo.user.visits || 0"
         :created-at="authStore.userInfo.user.created_at"
@@ -12,159 +17,340 @@
         :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">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_uuid"
+          :navigation-disabled="hasActiveModal"
+          allow-delete
+          @delete="handleDelete"
+          @credential-hover="hoveredCredentialUuid = $event"
+          @navigate-out="handleCredentialNavigateOut"
+        />
+        <div class="button-row" ref="credentialButtons">
+          <button @click="addNewCredential" class="btn-primary" @keydown="handleCredentialButtonKeydown">Register New</button>
+          <button @click="showRegLink = true" class="btn-secondary" @keydown="handleCredentialButtonKeydown">Another Device</button>
+        </div>
+      </div>
+    </section>
+
+    <SessionList
+      ref="sessionList"
+      :sessions="sessions"
+      :terminating-sessions="terminatingSessions"
+      :hovered-credential-uuid="hoveredCredentialUuid"
+      :navigation-disabled="hasActiveModal"
+      @terminate="terminateSession"
+      @session-hover="hoveredSession = $event"
+      @navigate-out="handleSessionNavigateOut"
+      section-description="You are currently signed in to the following sessions. If you don't recognize something, consider deleting not only the session but the associated passkey you suspect is compromised, as only this terminates all linked sessions and prevents logging in again."
     />
 
-      <h2>Your Passkeys</h2>
-      <div class="credential-list">
-        <div v-if="authStore.isLoading">
-          <p>Loading credentials...</p>
-        </div>
-        <div v-else-if="authStore.userInfo?.credentials?.length === 0">
-          <p>No passkeys found.</p>
-        </div>
-        <div v-else>
-          <div
-            v-for="credential in authStore.userInfo?.credentials || []"
-            :key="credential.credential_uuid"
-            :class="['credential-item', { 'current-session': credential.is_current_session }]"
-          >
-            <div class="credential-header">
-              <div class="credential-icon">
-                <img
-                  v-if="getCredentialAuthIcon(credential)"
-                  :src="getCredentialAuthIcon(credential)"
-                  :alt="getCredentialAuthName(credential)"
-                  class="auth-icon"
-                  width="32"
-                  height="32"
-                >
-                <span v-else class="auth-emoji">🔑</span>
-              </div>
-              <div class="credential-info">
-                <h4>{{ getCredentialAuthName(credential) }}</h4>
-              </div>
-              <div class="credential-dates">
-                <span class="date-label">Created:</span>
-                <span class="date-value">{{ formatDate(credential.created_at) }}</span>
-                <span class="date-label">Last used:</span>
-                <span class="date-value">{{ formatDate(credential.last_used) }}</span>
-              </div>
-              <div class="credential-actions">
-                <button
-                  @click="deleteCredential(credential.credential_uuid)"
-                  class="btn-delete-credential"
-                  :disabled="credential.is_current_session"
-                  :title="credential.is_current_session ? 'Cannot delete current session credential' : ''"
-                >
-                  🗑️
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+    <Modal v-if="showNameDialog" @close="showNameDialog = false">
+      <h3>Edit Display Name</h3>
+      <form @submit.prevent="saveName" class="modal-form">
+        <NameEditForm
+          label="Display Name"
+          v-model="newName"
+          :busy="saving"
+          @cancel="showNameDialog = false"
+        />
+      </form>
+    </Modal>
 
-      <div class="button-group" style="display: flex; gap: 10px;">
-        <button @click="addNewCredential" class="btn-primary">
-          Add New Passkey
-        </button>
-        <button @click="authStore.currentView = 'device-link'" class="btn-primary">
-          Add Another Device
+    <section class="section-block">
+      <div class="button-row" ref="logoutButtons">
+        <button
+          type="button"
+          class="btn-secondary"
+          @click="goBack"
+          @keydown="handleLogoutButtonKeydown"
+        >
+          Back
         </button>
+        <button v-if="!hasMultipleSessions" @click="logoutEverywhere" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">Logout</button>
+        <template v-else>
+          <button @click="logout" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">Logout</button>
+          <button @click="logoutEverywhere" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">All</button>
+        </template>
       </div>
-      <button @click="logout" class="btn-danger" style="width: 100%;">
-        Logout
-      </button>
-    </div>
-  </div>
+      <p class="logout-note" v-if="!hasMultipleSessions"><strong>Logout</strong> from {{ currentSessionHost }}.</p>
+      <p class="logout-note" v-else><strong>Logout</strong> this session on {{ currentSessionHost }}, or <strong>All</strong> sessions across all sites and devices for {{ rpName }}. You'll need to log in again with your passkey afterwards.</p>
+    </section>
+    <RegistrationLinkModal
+      v-if="showRegLink"
+      endpoint="/auth/api/user/create-link"
+      @close="showRegLink = false"
+      @copied="onLinkCopied"
+    />
+  </section>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
-import { useAuthStore } from '@/stores/auth'
-import { formatDate } from '@/utils/helpers'
-import passkey from '@/utils/passkey'
+import CredentialList from '@/components/CredentialList.vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
+import Modal from '@/components/Modal.vue'
+import NameEditForm from '@/components/NameEditForm.vue'
+import SessionList from '@/components/SessionList.vue'
+import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
+import RemoteAuthPermit from '@/components/RemoteAuthPermit.vue'
+import { useAuthStore } from '@/stores/auth'
+import { adminUiPath, makeUiHref } from '@/utils/settings'
+import passkey from '@/utils/passkey'
+import { goBack } from '@/utils/helpers'
+import { apiJson } from '@/utils/api'
+import { navigateButtonRow, focusPreferred, focusAtIndex, getDirection } from '@/utils/keynav'
 
 const authStore = useAuthStore()
 const updateInterval = ref(null)
+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)
+
+// 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?.user?.user_name || '' })
 
 onMounted(() => {
-  updateInterval.value = setInterval(() => {
-    // Trigger Vue reactivity to update formatDate fields
-    if (authStore.userInfo) {
-      authStore.userInfo = { ...authStore.userInfo }
-    }
-  }, 60000) // Update every minute
+  updateInterval.value = setInterval(() => { if (authStore.userInfo) authStore.userInfo = { ...authStore.userInfo } }, 60000)
 })
 
-onUnmounted(() => {
-  if (updateInterval.value) {
-    clearInterval(updateInterval.value)
-  }
-})
-
-const getCredentialAuthName = (credential) => {
-  const authInfo = authStore.userInfo?.aaguid_info?.[credential.aaguid]
-  return authInfo ? authInfo.name : 'Unknown Authenticator'
-}
-
-const getCredentialAuthIcon = (credential) => {
-  const authInfo = authStore.userInfo?.aaguid_info?.[credential.aaguid]
-  if (!authInfo) return null
-
-  const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-  const iconKey = isDarkMode ? 'icon_dark' : 'icon_light'
-  return authInfo[iconKey] || null
-}
+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 deleteCredential = async (credentialId) => {
-  if (!confirm('Are you sure you want to delete this passkey?')) return
+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
+  if (!credentialId) return
   try {
     await authStore.deleteCredential(credentialId)
-    authStore.showMessage('Passkey deleted successfully!', 'success', 3000)
-  } catch (error) {
-    authStore.showMessage(`Failed to delete passkey: ${error.message}`, 'error')
+    authStore.showMessage('Passkey deleted! You should also remove it from your password manager or device.', 'success', 3000)
+  } catch (error) { authStore.showMessage(`Failed to delete passkey: ${error.message}`, 'error') }
+}
+
+const rpName = computed(() => authStore.settings?.rp_name || 'this service')
+const sessions = computed(() => authStore.userInfo?.sessions || [])
+const currentSessionHost = computed(() => {
+  const currentSession = sessions.value.find(session => session.is_current)
+  return currentSession?.host || 'this host'
+})
+const terminatingSessions = ref({})
+
+const terminateSession = async (session) => {
+  const sessionId = session?.id
+  if (!sessionId) return
+  terminatingSessions.value = { ...terminatingSessions.value, [sessionId]: true }
+  try { await authStore.terminateSession(sessionId) }
+  catch (error) { authStore.showMessage(error.message || 'Failed to terminate session', 'error', 5000) }
+  finally {
+    const next = { ...terminatingSessions.value }
+    delete next[sessionId]
+    terminatingSessions.value = next
   }
 }
 
-const logout = async () => {
-  await authStore.logout()
-}
-
+const logoutEverywhere = async () => { await authStore.logoutEverywhere() }
+const logout = async () => { await authStore.logout() }
+const openNameDialog = () => { newName.value = authStore.userInfo?.user?.user_name || ''; showNameDialog.value = true }
 const isAdmin = computed(() => !!(authStore.userInfo?.is_global_admin || authStore.userInfo?.is_org_admin))
+const hasMultipleSessions = computed(() => sessions.value.length > 1)
+const breadcrumbEntries = computed(() => { const entries = [{ label: 'Auth', href: makeUiHref() }]; if (isAdmin.value) entries.push({ label: 'Admin', href: adminUiPath() }); return entries })
+
+const saveName = async () => {
+  const name = newName.value.trim()
+  if (!name) { authStore.showMessage('Name cannot be empty', 'error'); return }
+  try {
+    saving.value = true
+    await apiJson('/auth/api/user/display-name', { method: 'PUT', body: { display_name: name } })
+    showNameDialog.value = false
+    await authStore.loadUserInfo()
+    authStore.showMessage('Name updated successfully!', 'success', 3000)
+  } catch (e) { authStore.showMessage(e.message || 'Failed to update name', 'error') }
+  finally { saving.value = false }
+}
 </script>
 
 <style scoped>
-/* Removed inline user info styles; now provided by UserBasicInfo component */
-.admin-link {
-  font-size: 0.6em;
-  margin-left: 0.75rem;
-  text-decoration: none;
-  background: var(--color-background-soft, #eee);
-  padding: 0.2em 0.6em;
-  border-radius: 999px;
-  border: 1px solid var(--color-border, #ccc);
-  vertical-align: middle;
-  line-height: 1.2;
-}
-.admin-link:hover {
-  background: var(--color-background-mute, #ddd);
+.view-lede { margin: 0; color: var(--color-text-muted); font-size: 1rem; }
+.section-header { display: flex; flex-direction: column; gap: 0.4rem; }
+.empty-state { margin: 0; color: var(--color-text-muted); text-align: center; padding: 1rem 0; }
+.logout-note { margin: 0.75rem 0 0; color: var(--color-text-muted); font-size: 0.875rem; }
+.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);
 }
 </style>

frontend/src/components/QRCodeDisplay.vue

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

frontend/src/components/RegistrationLinkModal.vue

@@ -1,87 +1,166 @@
 <template>
-  <div 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 style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
-        <h2 id="regTitle" style="margin:0; font-size:1.25rem;">📱 Device Registration Link</h2>
-        <button class="icon-btn" @click="$emit('close')" aria-label="Close">❌</button>
+      <div class="reg-header-row">
+        <h2 id="regTitle" class="reg-title">
+          📱 <span v-if="userName">Registration for {{ userName }}</span><span v-else>Add Another Device</span>
+        </h2>
+        <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>
-            <strong>Scan and visit the URL on another device.</strong><br>
-            <small>⚠️ Expires in 24 hours and one-time use.</small>
+        <p class="reg-help">
+          Scan this QR code on the new device, or copy the link and open it there.
+        </p>
+
+        <QRCodeDisplay
+          :url="linkUrl"
+          :show-link="true"
+          @copied="onCopied"
+          @keydown="handleQRKeydown"
+        />
+
+        <p class="expiry-note" v-if="expiresAt">
+          This link expires {{ formatDate(expiresAt).toLowerCase() }}.
         </p>
-          <div v-if="expires" style="font-size:12px; margin-top:6px;">Expires: {{ new Date(expires).toLocaleString() }}</div>
       </div>
-      </div>
-      <div style="display:flex; justify-content:flex-end; gap:.5rem; margin-top:10px;">
+
+      <div class="reg-actions" ref="actionsRow" @keydown="handleActionsKeydown">
         <button class="btn-secondary" @click="$emit('close')">Close</button>
-        <button class="btn-primary" :disabled="!url" @click="copy">Copy Link</button>
-      </div>
       </div>
     </div>
+  </dialog>
 </template>
 
 <script setup>
-import { ref, onMounted, watch, computed, nextTick } from 'vue'
-import QRCode from 'qrcode/lib/browser'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import QRCodeDisplay from '@/components/QRCodeDisplay.vue'
+import { apiJson } from '@/utils/api'
+import { formatDate } from '@/utils/helpers'
+import { getDirection } from '@/utils/keynav'
 
 const props = defineProps({
-  endpoint: { type: String, required: true }, // POST endpoint returning {url, expires}
-  autoCopy: { type: Boolean, default: true }
+  endpoint: { type: String, required: true },
+  userName: { type: String, default: '' }
 })
 
-const emit = defineEmits(['close','generated','copied'])
+const emit = defineEmits(['close', 'copied'])
 
-const url = ref(null)
-const expires = ref(null)
-const qrCanvas = ref(null)
+const dialog = 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 fetchLink() {
+async function generateLink() {
   try {
-    const res = await fetch(props.endpoint, { method: 'POST' })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
-    url.value = data.url
-    expires.value = data.expires
-    emit('generated', { url: data.url, expires: data.expires })
+    const data = await apiJson(props.endpoint, { method: 'POST' })
+    if (data.url) {
+      linkUrl.value = data.url
+      expiresAt.value = data.expires ? new Date(data.expires) : null
+
+      // Show the dialog as modal
       await nextTick()
-    drawQR()
-    if (props.autoCopy) copy()
-  } catch (e) {
-    url.value = null
-    expires.value = null
-    console.error('Failed to create link', e)
+      if (dialog.value) {
+        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 {
+    emit('close')
   }
 }
 
-async function drawQR() {
-  if (!url.value) return
-  await nextTick()
-  if (!qrCanvas.value) return
-  QRCode.toCanvas(qrCanvas.value, url.value, { scale: 8 }, err => { if (err) console.error(err) })
+function onCopied() {
+  emit('copied')
 }
 
-async function copy() {
-  if (!url.value) return
-  try { await navigator.clipboard.writeText(url.value); emit('copied', url.value); emit('close') } catch (_) { /* ignore */ }
+const handleDialogKeydown = (event) => {
+  // ESC is handled automatically by <dialog>
+  // Handle other key navigation
+  const direction = getDirection(event)
+  if (!direction) return
+
+  if (direction === 'down' || direction === 'up') {
+    // Let the individual handlers manage navigation
+    return
+  }
 }
 
-onMounted(fetchLink)
-watch(url, () => drawQR(), { flush: 'post' })
+const handleQRKeydown = (event) => {
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  // Navigation constrained within modal: QR link <-> Close button
+  if (direction === 'down' || direction === 'up') {
+    // Toggle between QR link and close button
+    actionsRow.value?.querySelector('button')?.focus()
+  }
+  // Left/right do nothing on QR code
+}
+
+const handleActionsKeydown = (event) => {
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  // Navigation constrained within modal: Close button <-> QR link
+  if (direction === 'up' || direction === 'down') {
+    // Toggle between close button and QR link
+    document.querySelector('.qr-link')?.focus()
+  }
+  // Left/right do nothing (only one button)
+}
+
+onMounted(() => {
+  // Save currently focused element before modal takes focus
+  previouslyFocusedElement.value = document.activeElement
+  generateLink()
+})
+
+onUnmounted(() => {
+  // Restore focus when modal closes
+  const prev = previouslyFocusedElement.value
+  if (prev && document.body.contains(prev) && !prev.disabled) {
+    prev.focus()
+  }
+})
 </script>
+
 <style scoped>
+dialog {
+  border: none;
+  background: transparent;
+  padding: 0;
+  max-width: none;
+  width: fit-content;
+  height: fit-content;
+  position: fixed;
+  inset: 0;
+  margin: auto;
+}
+
+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; }
-/* Minimal extra styling; main look comes from global styles */
-.qr-link { text-decoration:none; color:inherit; }
+.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>

frontend/src/components/RemoteAuthPermit.vue

@@ -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>

frontend/src/components/RemoteAuthRequest.vue

@@ -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>

frontend/src/components/ResetView.vue

@@ -1,55 +0,0 @@
-<template>
-  <div class="container">
-    <div class="view active">
-      <h1>🔑 Add New Credential</h1>
-      <label class="name-edit">
-        <span>👤 Name:</span>
-        <input
-          type="text"
-          v-model="user_name"
-          :placeholder="authStore.userInfo?.user?.user_name || 'Your name'"
-          :disabled="authStore.isLoading"
-          maxlength="64"
-          @keyup.enter="register"
-        />
-      </label>
-      <p>Proceed to complete {{authStore.userInfo?.session_type}}:</p>
-      <button
-        class="btn-primary"
-        :disabled="authStore.isLoading"
-        @click="register"
-      >
-        {{ authStore.isLoading ? 'Registering...' : 'Register Passkey' }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useAuthStore } from '@/stores/auth'
-import passkey from '@/utils/passkey'
-import { ref } from 'vue'
-
-const authStore = useAuthStore()
-const user_name = ref('') // intentionally blank; original shown via placeholder
-
-async function register() {
-  authStore.isLoading = true
-  authStore.showMessage('Starting registration...', 'info')
-
-  try {
-  const result = await passkey.register(authStore.resetToken, user_name.value)
-  console.log("Result", result)
-  await authStore.setSessionCookie(result.session_token)
-  // resetToken cleared by setSessionCookie; ensure again
-  authStore.resetToken = null
-  authStore.showMessage('Passkey registered successfully!', 'success', 2000)
-  await authStore.loadUserInfo()
-  authStore.selectView()
-  } catch (error) {
-    authStore.showMessage(`Registration failed: ${error.message}`, 'error')
-  } finally {
-    authStore.isLoading = false
-  }
-}
-</script>

frontend/src/components/RestrictedAuth.vue

@@ -0,0 +1,319 @@
+<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 '@/utils/api'
+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 userInfo = ref(null)
+const currentView = ref('initial') // 'initial', 'login', 'forbidden'
+const authView = ref('local') // 'local' or 'remote'
+const buttonRow = ref(null)
+let statusTimer = null
+
+const isAuthenticated = computed(() => !!userInfo.value?.authenticated)
+
+const 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(() => 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) {
+      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 fetchUserInfo() {
+  try {
+    userInfo.value = await fetchJson('/auth/api/user-info', { method: 'POST' })
+    if (isAuthenticated.value && props.mode !== 'reauth') {
+      currentView.value = 'forbidden'
+      emit('forbidden', userInfo.value)
+    } else {
+      currentView.value = 'login'
+    }
+  } catch (error) {
+    console.error('Failed to load user info', error)
+    if (error.status !== 401 && error.status !== 403) {
+      showMessage(getUserFriendlyErrorMessage(error), 'error', 4000)
+    }
+    userInfo.value = null
+    currentView.value = 'login'
+  }
+}
+
+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' })
+    userInfo.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 fetchUserInfo()
+  initializing.value = false
+
+  // Add click handler for inline links
+  document.addEventListener('click', handleHeaderLinkClick)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleHeaderLinkClick)
+})
+
+defineExpose({
+  showMessage,
+  isAuthenticated,
+  userInfo
+})
+</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>

frontend/src/components/SessionList.vue

@@ -0,0 +1,244 @@
+<template>
+  <section class="section-block" data-component="session-list-section">
+    <div class="section-header">
+      <h2>Active Sessions</h2>
+      <p class="section-description">{{ sectionDescription }}</p>
+    </div>
+    <div class="section-body">
+      <div>
+        <template v-if="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 group.sessions"
+                :key="session.id"
+                :class="['session-item', {
+                  'is-current': session.is_current && !hoveredIp && !hoveredCredentialUuid,
+                  'is-hovered': hoveredSession?.id === session.id,
+                  'is-linked-credential': hoveredCredentialUuid === session.credential_uuid
+                }]"
+                tabindex="-1"
+                @mousedown.prevent
+                @click.capture="handleCardClick"
+                @focusin="handleSessionFocus(session)"
+                @focusout="handleSessionBlur($event)"
+                @keydown="handleItemKeydown($event, session)"
+              >
+                <div class="item-top">
+                  <h4 class="item-title">{{ session.user_agent }}</h4>
+                  <div class="item-actions">
+                    <span v-if="session.is_current && !hoveredIp && !hoveredCredentialUuid" class="badge badge-current">Current</span>
+                    <span v-else-if="hoveredSession?.id === session.id" class="badge badge-current">Selected</span>
+                    <span v-else-if="hoveredCredentialUuid === session.credential_uuid" class="badge badge-current">Linked</span>
+                    <span v-else-if="!hoveredCredentialUuid && isSameHost(session.ip)" class="badge">Same IP</span>
+                    <button
+                      @click="$emit('terminate', session)"
+                      class="btn-card-delete"
+                      :disabled="isTerminating(session.id)"
+                      :title="isTerminating(session.id) ? 'Terminating...' : 'Terminate session'"
+                      tabindex="-1"
+                    >❌</button>
+                  </div>
+                </div>
+                <div class="item-details">
+                  <div class="session-dates">
+                    <span class="date-label">{{ formatDate(session.last_renewed) }}</span>
+                    <span class="date-value" @click="copyIp(session.ip)" title="Click to copy full IP">{{ displayIp(session.ip) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <div v-else class="empty-state"><p>{{ emptyMessage }}</p></div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { formatDate } from '@/utils/helpers'
+import { useAuthStore } from '@/stores/auth'
+import { hostIP } from '@/utils/helpers'
+import { navigateGrid, handleDeleteKey, handleEscape, getDirection } from '@/utils/keynav'
+
+const props = defineProps({
+  sessions: { type: Array, default: () => [] },
+  emptyMessage: { type: String, default: 'You currently have no other active sessions.' },
+  sectionDescription: { type: String, default: "Review where you're signed in and end any sessions you no longer recognize." },
+  terminatingSessions: { type: Object, default: () => ({}) },
+  hoveredCredentialUuid: { type: String, default: null },
+  navigationDisabled: { type: Boolean, default: false },
+})
+
+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 handleGroupKeydown = (event, host) => {
+  const group = event.currentTarget
+  const sessionList = group.querySelector('.session-list')
+  const items = sessionList?.querySelectorAll('.session-item')
+  const allGroups = Array.from(document.querySelectorAll('.session-group'))
+  const groupIndex = allGroups.indexOf(group)
+
+  // Enter on group header opens link (always allowed)
+  if (event.key === 'Enter' && event.target === group) {
+    if (host) group.querySelector('a')?.click()
+    return
+  }
+
+  if (props.navigationDisabled) return
+
+  // Arrow keys to enter the grid from the group
+  const direction = getDirection(event)
+  if (['down', 'right'].includes(direction) && event.target === group) {
+    event.preventDefault()
+    items?.[0]?.focus()
+    return
+  }
+
+  // Up/Left from group navigates to previous group or out
+  if (['up', 'left'].includes(direction) && event.target === group) {
+    event.preventDefault()
+    if (groupIndex > 0) {
+      allGroups[groupIndex - 1].focus()
+    } else {
+      emit('navigate-out', 'up')
+    }
+    return
+  }
+
+  // Escape emits navigate-out
+  handleEscape(event, (dir) => emit('navigate-out', dir))
+}
+
+const handleItemKeydown = (event, session) => {
+  // Handle delete (always allowed even with modal)
+  handleDeleteKey(event, () => {
+    if (!isTerminating(session.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>

frontend/src/components/UserBasicInfo.vue

@@ -1,34 +1,27 @@
 <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 v-if="!editingName" class="user-name-row">
+      <span class="user-name-row">
         <span class="display-name" :title="name">{{ name }}</span>
-        <button v-if="canEdit && updateEndpoint" class="mini-btn" @click="startEdit" title="Edit name">✏️</button>
-      </span>
-      <span v-else class="user-name-row editing">
-        <input
-          v-model="newName"
-          class="name-input"
-          :placeholder="name"
-          :disabled="busy || loading"
-          maxlength="64"
-          @keyup.enter="saveName"
-        />
-        <button class="mini-btn" @click="saveName" :disabled="busy || loading" title="Save name">💾</button>
-        <button class="mini-btn" @click="cancelEdit" :disabled="busy || loading" title="Cancel">✖</button>
+        <button v-if="canEdit && updateEndpoint" class="mini-btn" @click="emit('editName')" title="Edit name">✏️</button>
       </span>
     </h3>
     <div v-if="orgDisplayName || roleName" class="org-role-sub">
       <div class="org-line" v-if="orgDisplayName">{{ orgDisplayName }}</div>
       <div class="role-line" v-if="roleName">{{ roleName }}</div>
     </div>
-    <span><strong>Visits:</strong></span>
-    <span>{{ visits || 0 }}</span>
-    <span><strong>Registered:</strong></span>
-    <span>{{ formatDate(createdAt) }}</span>
-    <span><strong>Last seen:</strong></span>
-    <span>{{ formatDate(lastSeen) }}</span>
+    <div class="user-details">
+      <span class="date-label"><strong>Visits:</strong></span>
+      <span class="date-value">{{ visits || 0 }}</span>
+      <span class="date-label"><strong>Registered:</strong></span>
+      <span class="date-value">{{ formatDate(createdAt) }}</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>
 
@@ -49,54 +42,66 @@ const props = defineProps({
   roleName: { type: String, default: '' }
 })
 
-const emit = defineEmits(['saved'])
+const emit = defineEmits(['saved', 'editName'])
 const authStore = useAuthStore()
 
-const editingName = ref(false)
-const newName = ref('')
-const busy = ref(false)
 const userLoaded = computed(() => !!props.name)
-
-function startEdit() { editingName.value = true; newName.value = '' }
-function cancelEdit() { editingName.value = false }
-async function saveName() {
-  if (!props.updateEndpoint) { editingName.value = false; return }
-  try {
-    busy.value = true
-    authStore.isLoading = true
-    const bodyName = newName.value.trim()
-    if (!bodyName) { cancelEdit(); return }
-    const res = await fetch(props.updateEndpoint, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: bodyName }) })
-    let data = {}
-    try { data = await res.json() } catch (_) {}
-    if (!res.ok || data.detail) throw new Error(data.detail || 'Update failed')
-    editingName.value = false
-    authStore.showMessage('Name updated', 'success', 1500)
-    emit('saved')
-  } catch (e) { authStore.showMessage(e.message || 'Failed to update name', 'error') }
-  finally { busy.value = false; authStore.isLoading = false }
-}
-watch(() => props.name, () => { if (!props.name) editingName.value = false })
 </script>
 
 <style scoped>
-.user-info { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
-.user-info h3 { grid-column: span 2; }
-.org-role-sub { grid-column: span 2; display:flex; flex-direction:column; margin: -0.15rem 0 0.25rem; }
-.org-line { font-size: .7rem; font-weight:600; line-height:1.1; }
-.role-line { font-size:.6rem; color:#555; line-height:1.1; }
-.user-info span { text-align: left; }
-.user-name-heading { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.25rem 0; }
+.user-info.has-extra {
+  grid-template-columns: auto 1fr 2fr;
+  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; }
+.info-label:nth-of-type(1) { grid-area: label1; }
+.info-value:nth-of-type(2) { grid-area: value1; }
+.info-label:nth-of-type(3) { grid-area: label2; }
+.info-value:nth-of-type(4) { grid-area: value2; }
+.info-label:nth-of-type(5) { grid-area: label3; }
+.info-value:nth-of-type(6) { grid-area: value3; }
+.user-info-extra { grid-area: extra; padding-left: 2rem; border-left: 1px solid var(--color-border); }
 .user-name-row { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; }
 .user-name-row.editing { flex: 1 1 auto; }
-.icon { flex: 0 0 auto; }
 .display-name { font-weight: 600; font-size: 1.05em; line-height: 1.2; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.name-input { width: auto; flex: 1 1 140px; min-width: 120px; padding: 6px 8px; font-size: 0.9em; border: 1px solid #a9c5d6; border-radius: 6px; }
+.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: 2px solid #667eea55; border-color: #667eea; }
-.mini-btn { width: auto; padding: 4px 6px; margin: 0; font-size: 0.75em; line-height: 1; background: #eef5fa; border: 1px solid #b7d2e3; border-radius: 6px; cursor: pointer; transition: background 0.2s, transform 0.15s; }
-.mini-btn:hover:not(:disabled) { background: #dcecf6; }
+.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; 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>

frontend/src/stores/auth.js

@@ -1,14 +1,16 @@
 import { defineStore } from 'pinia'
 import { register, authenticate } from '@/utils/passkey'
+import { getSettings } from '@/utils/settings'
+import { apiJson } from '@/utils/api'
 
 export const useAuthStore = defineStore('auth', {
   state: () => ({
     // Auth State
-    userInfo: null, // Contains the full user info response: {user, credentials, aaguid_info, session_type, authenticated}
-    settings: null, // Server provided settings (/auth/settings)
+    userInfo: null, // Contains the full user info response: {user, credentials, aaguid_info}
     isLoading: false,
-    resetToken: null, // transient reset token
-    restrictedMode: false, // Anywhere other than /auth/: restrict to login or permission denied
+
+    // Settings
+    settings: null,
 
     // UI State
     currentView: 'login',
@@ -18,7 +20,12 @@ export const useAuthStore = defineStore('auth', {
       show: false
     },
   }),
+  getters: {
+  },
   actions: {
+    setLoading(flag) {
+      this.isLoading = !!flag
+    },
     showMessage(message, type = 'info', duration = 3000) {
       this.status = {
         message,
@@ -31,26 +38,23 @@ export const useAuthStore = defineStore('auth', {
         }, duration)
       }
     },
-    async setSessionCookie(sessionToken) {
-  const response = await fetch('/auth/api/set-session', {
-        method: 'POST',
-        headers: {'Authorization': `Bearer ${sessionToken}`},
-      })
-      const result = await response.json()
-      if (result.detail) {
-        throw new Error(result.detail)
+    async setSessionCookie(result) {
+      if (!result?.session_token) {
+        console.error('setSessionCookie called with missing session_token:', result)
+        throw new Error('Authentication response missing session_token')
       }
-  // On successful session establishment, discard any reset token to avoid
-  // sending stale Authorization headers on subsequent API calls.
-  this.resetToken = null
-      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
       } finally {
         this.isLoading = false
@@ -61,8 +65,9 @@ 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()
 
         return result
       } finally {
@@ -70,71 +75,70 @@ export const useAuthStore = defineStore('auth', {
       }
     },
     selectView() {
-      if (this.restrictedMode) {
-        // In restricted mode only allow login or show permission denied if already authenticated
       if (!this.userInfo) this.currentView = 'login'
-        else if (this.userInfo.authenticated) this.currentView = 'permission-denied'
-        else this.currentView = 'login' // do not expose reset/registration flows outside /auth/
-        return
-      }
-      if (!this.userInfo) this.currentView = 'login'
-      else if (this.userInfo.authenticated) this.currentView = 'profile'
-      else this.currentView = 'reset'
-    },
-    setRestrictedMode(flag) {
-      this.restrictedMode = !!flag
-    },
-    async loadUserInfo() {
-      const headers = {}
-      // Reset tokens are only passed via query param now, not Authorization header
-  const url = this.resetToken ? `/auth/api/user-info?reset=${encodeURIComponent(this.resetToken)}` : '/auth/api/user-info'
-      const response = await fetch(url, { method: 'POST', headers })
-      let result = null
-      try {
-        result = await response.json()
-      } catch (_) {
-        // ignore JSON parse errors (unlikely)
-      }
-      if (response.status === 401 && result?.detail) {
-        this.showMessage(result.detail, 'error', 5000)
-        throw new Error(result.detail)
-      }
-      if (result?.detail) {
-        // Other error style
-        this.showMessage(result.detail, 'error', 5000)
-        throw new Error(result.detail)
-      }
-      this.userInfo = result
-      console.log('User info loaded:', result)
+      else this.currentView = 'profile'
     },
     async loadSettings() {
+      this.settings = await getSettings()
+    },
+    async loadUserInfo() {
       try {
-  const res = await fetch('/auth/api/settings')
-        if (!res.ok) return
-        const data = await res.json()
-        this.settings = data
-        if (data?.rp_name) {
-          document.title = data.rp_name
+        this.userInfo = await apiJson('/auth/api/user-info', { method: 'POST' })
+        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)
         }
-      } catch (_) {
-        // ignore
+        throw error
       }
     },
     async deleteCredential(uuid) {
-  const response = await fetch(`/auth/api/credential/${uuid}`, {method: 'Delete'})
-      const result = await response.json()
-      if (result.detail) throw new Error(`Server: ${result.detail}`)
-
+      await apiJson(`/auth/api/user/credential/${uuid}`, { method: 'DELETE' })
       await this.loadUserInfo()
     },
+    async terminateSession(sessionId) {
+      try {
+        const payload = await apiJson(`/auth/api/user/session/${sessionId}`, { method: 'DELETE' })
+        if (payload?.current_session_terminated) {
+          sessionStorage.clear()
+          location.reload()
+          return
+        }
+        await this.loadUserInfo()
+        this.showMessage('Session terminated', 'success', 2500)
+      } catch (error) {
+        console.error('Terminate session error:', error)
+        throw error
+      }
+    },
     async logout() {
       try {
-        await fetch('/auth/api/logout', {method: 'POST'})
+        await apiJson('/auth/api/logout', {method: 'POST'})
+        sessionStorage.clear()
         location.reload()
       } catch (error) {
         console.error('Logout error:', error)
+        // Suppress toast for 401/403 errors - the auth iframe will handle these
+        if (error.status !== 401 && error.status !== 403) {
           this.showMessage(error.message, 'error')
         }
+      }
+    },
+    async logoutEverywhere() {
+      try {
+        await apiJson('/auth/api/user/logout-all', {method: 'POST'})
+        sessionStorage.clear()
+        location.reload()
+      } catch (error) {
+        console.error('Logout-all error:', error)
+        // Suppress toast for 401/403 errors - the auth iframe will handle these
+        if (error.status !== 401 && error.status !== 403) {
+          this.showMessage(error.message, 'error')
+        }
+      }
     },
   }
 })

frontend/src/utils/api.js

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

frontend/src/utils/awaitable-websocket.js

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

frontend/src/utils/base64url.js

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

frontend/src/utils/helpers.js

@@ -5,16 +5,18 @@ export function formatDate(dateString) {
 
   const date = new Date(dateString)
   const now = new Date()
-  const diffMs = now - date
-  const diffMinutes = Math.floor(diffMs / (1000 * 60))
-  const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
-  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+  const diffMs = date - now  // Changed to date - now for future/past
+  const isFuture = diffMs > 0
+  const absDiffMs = Math.abs(diffMs)
+  const diffMinutes = Math.round(absDiffMs / (1000 * 60))
+  const diffHours = Math.round(absDiffMs / (1000 * 60 * 60))
+  const diffDays = Math.round(absDiffMs / (1000 * 60 * 60 * 24))
 
-  if (diffMs < 0 || diffDays > 7) return date.toLocaleDateString()
-  if (diffMinutes === 0) return 'Just now'
-  if (diffMinutes < 60) return diffMinutes === 1 ? 'a minute ago' : `${diffMinutes} minutes ago`
-  if (diffHours < 24) return diffHours === 1 ? 'an hour ago' : `${diffHours} hours ago`
-  return diffDays === 1 ? 'a day ago' : `${diffDays} days ago`
+  if (absDiffMs < 1000 * 60) return 'Now'
+  if (diffMinutes <= 60) return isFuture ? `In ${diffMinutes} minute${diffMinutes === 1 ? '' : 's'}` : diffMinutes === 1 ? 'a minute ago' : `${diffMinutes} minutes ago`
+  if (diffHours <= 24) return isFuture ? `In ${diffHours} hour${diffHours === 1 ? '' : 's'}` : diffHours === 1 ? 'an hour ago' : `${diffHours} hours ago`
+  if (diffDays <= 14) return isFuture ? `In ${diffDays} day${diffDays === 1 ? '' : 's'}` : diffDays === 1 ? 'a day ago' : `${diffDays} days ago`
+  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
 }
 
 export function getCookie(name) {
@@ -22,3 +24,20 @@ export function getCookie(name) {
   const parts = value.split(`; ${name}=`)
   if (parts.length === 2) return parts.pop().split(';').shift()
 }
+
+export const goBack = () => history.back() || window.close()
+
+// IPv4 unchanged, IPv6 returns /64 network prefix in compact form
+export const hostIP = ip => {
+  try {
+    if (!ip || !ip.includes(':')) return ip
+    const strip = s => s.replace(/^\[|\]$/g, '')
+    const norm = strip(new URL(`http://[${ip}]/`).hostname)
+    const [l, r] = norm.split('::').map(s => s ? s.split(':') : [])
+    const full = r ? [...l, ...Array(8 - l.length - r.length).fill('0'), ...r] : l
+    return strip(new URL(`http://[${full.slice(0, 4).join(':')}::]/`).hostname).replace(/::$/, '')
+  } catch (e) {
+    console.error('hostIP processing failed for:', ip, e)
+    return ip
+  }
+}

frontend/src/utils/keynav.js

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

frontend/src/utils/passkey.js

@@ -1,35 +1,71 @@
 import { startRegistration, startAuthentication } from '@simplewebauthn/browser'
 import aWebSocket from '@/utils/awaitable-websocket'
+import { getSettings } from '@/utils/settings'
+import { showAuthIframe } from '@/utils/api'
 
-export async function register(resetToken = null, displayName = null) {
+// Generic path normalizer: if an auth_host is configured and differs from current
+// host, return absolute URL (scheme derived by aWebSocket). Otherwise, keep as-is.
+async function makeUrl(path) {
+  const s = await getSettings()
+  const h = s?.auth_host
+  return h && location.host !== h ? `//${h}${path}` : path
+}
+
+export async function register(resetToken = null, displayName = null, onstartreg = null) {
   let params = []
   if (resetToken) params.push(`reset=${encodeURIComponent(resetToken)}`)
   if (displayName) params.push(`name=${encodeURIComponent(displayName)}`)
   const qs = params.length ? `?${params.join('&')}` : ''
-  const url = `/auth/ws/register${qs}`
-  const ws = await aWebSocket(url)
+
+  while (true) {
+    const ws = await aWebSocket(await makeUrl(`/auth/ws/register${qs}`))
     try {
-    const optionsJSON = await ws.receive_json()
-    const registrationResponse = await startRegistration({ optionsJSON })
+      const res = await ws.receive_json()
+
+      // 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('/auth/ws/authenticate')
+  const ws = await aWebSocket(await makeUrl('/auth/ws/authenticate'))
   try {
-    const optionsJSON = await ws.receive_json()
-    const authResponse = await startAuthentication({ optionsJSON })
+    let res = await ws.receive_json()
+    if (res.status >= 400) throw new Error(res.detail || `Authentication failed: ${res.status}`)
+
+    const authResponse = await startAuthentication(res)
     ws.send_json(authResponse)
-    const result = await ws.receive_json()
-    return result
+
+    res = await ws.receive_json()
+    if (res.status >= 400) throw new Error(res.detail || `Authentication failed: ${res.status}`)
+    return res
   } catch (error) {
     console.error('Authentication error:', error)
     throw Error(error.name === "NotAllowedError" ? 'Passkey authentication cancelled' : error.message)

frontend/src/utils/pow-test.js

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

frontend/src/utils/pow.js

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

frontend/src/utils/settings.js

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

frontend/vite.config.js

@@ -1,55 +1,136 @@
 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'
 
-// https://vite.dev/config/
-export default defineConfig(({ command, mode }) => ({
+// Auth host mode: when set, clients accessing the auth host get /auth/ at / and /auth/admin/ at /admin/
+const authHost = process.env.PASKIA_AUTH_HOST
+
+export default defineConfig(({ command }) => ({
+  appType: 'mpa',
+  publicDir: 'public',
   plugins: [
     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))
+    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }
   },
-  },
-  // Use absolute paths at dev, deploy under /auth/
-  base: command === 'build' ? '/auth/' : '/',
+  base: '/',
   server: {
     port: 4403,
+    allowedHosts: true,
+    fs: {
+      allow: ['..']
+    },
     proxy: {
-      '/auth/': {
+      // Only proxy these two specific backend API paths
+      '/auth/api': {
+        target: 'http://localhost:4402'
+      },
+      '/auth/ws': {
         target: 'http://localhost:4402',
-        ws: true,
-        changeOrigin: false,
-        // We proxy API + WS under /auth/, but want Vite to serve the SPA entrypoints
-        // and static assets so that HMR works. Bypass tells http-proxy to skip
-        // proxying when we return a (possibly rewritten) local path.
-        bypass(req) {
-          const rawUrl = req.url || ''
-          // Strip query/hash to match path-only for SPA entrypoints with query params (e.g. ?reset=token)
-          const url = rawUrl.split('?')[0].split('#')[0]
-          // Bypass only root SPA entrypoints + static assets so Vite serves them for HMR.
-          // Admin API endpoints (e.g., /auth/admin/orgs) must still hit backend.
-          if (url === '/auth/' || url === '/auth') return '/'
-          if (url === '/auth/admin' || url === '/auth/admin/') return '/admin/'
-          if (url.startsWith('/auth/assets/')) return url.replace(/^\/auth/, '')
-          // Everything else (including /auth/admin/* APIs) should proxy.
-        }
+        ws: true
+      },
+      // Passphrase links: /auth/word1.word2.word3.word4.word5
+      '^/auth/[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+$': {
+        target: 'http://localhost:4402'
+      },
+      // Passphrase links: /word1.word2.word3.word4.word5
+      '^/[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+$': {
+        target: 'http://localhost:4402'
       }
     }
   },
   build: {
-    outDir: '../passkey/frontend-build',
+    outDir: '../paskia/frontend-build',
     emptyOutDir: true,
-    assetsDir: 'assets',
     rollupOptions: {
       input: {
-        index: resolve(__dirname, 'index.html'),
-        admin: resolve(__dirname, 'admin/index.html')
+        auth: resolve(__dirname, 'auth/index.html'),
+        admin: resolve(__dirname, 'auth/admin/index.html'),
+        restricted: resolve(__dirname, 'auth/restricted/index.html'),
+        reset: resolve(__dirname, 'int/reset/index.html'),
+        forward: resolve(__dirname, 'int/forward/index.html'),
       },
-      output: {}
+      output: {
+        entryFileNames: (chunkInfo) => {
+          return 'auth/assets/[name]-[hash].js'
+        },
+        chunkFileNames: (chunkInfo) => {
+          return 'auth/assets/[name]-[hash].js'
+        },
+        assetFileNames: (assetInfo) => {
+          return 'auth/assets/[name]-[hash][extname]'
+        }
+      }
     }
   }
 }))

paskia/__init__.py

@@ -0,0 +1,3 @@
+from paskia.sansio import Passkey
+
+__all__ = ["Passkey"]

paskia/aaguid/__init__.py

@@ -14,7 +14,7 @@ from importlib.resources import files
 __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"))
 
 

paskia/authsession.py

@@ -0,0 +1,112 @@
+"""
+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 datetime, timezone
+from uuid import UUID
+
+from paskia.config import SESSION_LIFETIME
+from paskia.db import ResetToken, Session
+from paskia.globals import db, passkey
+from paskia.util import hostutil
+from paskia.util.tokens import create_token, reset_key, session_key
+
+EXPIRES = SESSION_LIFETIME
+
+
+def expires() -> datetime:
+    return datetime.now(timezone.utc) + EXPIRES
+
+
+def reset_expires() -> datetime:
+    from .config import RESET_LIFETIME
+
+    return datetime.now(timezone.utc) + RESET_LIFETIME
+
+
+def session_expiry(session: Session) -> datetime:
+    """Calculate the expiration timestamp for a session (UTC aware)."""
+    # After migration all renewed timestamps are timezone-aware UTC
+    return session.renewed + EXPIRES
+
+
+async def create_session(
+    user_uuid: UUID,
+    credential_uuid: UUID,
+    *,
+    host: str,
+    ip: str,
+    user_agent: str,
+) -> str:
+    """Create a new session and return a session token."""
+    normalized_host = hostutil.normalize_host(host)
+    if not normalized_host:
+        raise ValueError("Host required for session creation")
+    hostname = normalized_host.split(":")[0]  # Domain names only, IPs aren't supported
+    rp_id = passkey.instance.rp_id
+    if not (hostname == rp_id or hostname.endswith(f".{rp_id}")):
+        raise ValueError(f"Host must be the same as or a subdomain of {rp_id}")
+    token = create_token()
+    now = datetime.now(timezone.utc)
+    await db.instance.create_session(
+        user_uuid=user_uuid,
+        credential_uuid=credential_uuid,
+        key=session_key(token),
+        host=normalized_host,
+        ip=ip,
+        user_agent=user_agent,
+        renewed=now,
+    )
+    return token
+
+
+async def get_reset(token: str) -> ResetToken:
+    """Validate a credential reset token. Returns None if the token is not well formed (i.e. it is another type of token)."""
+    record = await db.instance.get_reset_token(reset_key(token))
+    if record and record.expiry >= datetime.now(timezone.utc):
+        return record
+    raise ValueError("This authentication link is no longer valid.")
+
+
+async def get_session(token: str, host: str | None = None) -> Session:
+    """Validate a session token and return session data if valid."""
+    host = hostutil.normalize_host(host)
+    if not host:
+        raise ValueError("Invalid host")
+    session = await db.instance.get_session(session_key(token))
+    if session and session_expiry(session) >= datetime.now(timezone.utc):
+        if session.host is None:
+            # First time binding: store exact host:port (or IPv6 form) now.
+            await db.instance.set_session_host(session.key, host)
+            session.host = host
+        elif session.host != host:
+            raise ValueError("Session host mismatch")
+        return session
+    raise ValueError("Your session has expired. Please sign in again!")
+
+
+async def refresh_session_token(token: str, *, ip: str, user_agent: str):
+    """Refresh a session extending its expiry."""
+    session_record = await db.instance.get_session(session_key(token))
+    if not session_record:
+        raise ValueError("Session not found or expired")
+    updated = await db.instance.update_session(
+        session_key(token),
+        ip=ip,
+        user_agent=user_agent,
+        renewed=datetime.now(timezone.utc),
+    )
+    if not updated:
+        raise ValueError("Session not found or expired")
+
+
+async def delete_credential(credential_uuid: UUID, auth: str, host: str | None = None):
+    """Delete a specific credential for the current user."""
+    s = await get_session(auth, host=host)
+    await db.instance.delete_credential(credential_uuid, s.user_uuid)

paskia/bootstrap.py

@@ -8,13 +8,13 @@ generating a reset link for initial admin setup.
 
 import asyncio
 import logging
-from datetime import datetime
+from datetime import datetime, timezone
 
 import uuid7
 
-from . import authsession, globals
-from .db import Org, Permission, Role, User
-from .util import passphrase, tokens
+from paskia import authsession, globals
+from paskia.db import Org, Permission, Role, User
+from paskia.util import hostutil, passphrase, tokens
 
 
 def _init_logger() -> logging.Logger:
@@ -41,27 +41,22 @@ ADMIN_RESET_MESSAGE = """\
 async def _create_and_log_admin_reset_link(user_uuid, message, session_type) -> str:
     """Create an admin reset link and log it with the provided message."""
     token = passphrase.generate()
-    await globals.db.instance.create_session(
+    expiry = authsession.reset_expires()
+    await globals.db.instance.create_reset_token(
         user_uuid=user_uuid,
         key=tokens.reset_key(token),
-        expires=authsession.expires(),
-        info={"type": session_type},
+        expiry=expiry,
+        token_type=session_type,
     )
-    reset_link = f"{globals.passkey.instance.origin}/auth/{token}"
+    reset_link = hostutil.reset_link_url(token)
     logger.info(ADMIN_RESET_MESSAGE, message, reset_link)
     return reset_link
 
 
-async def bootstrap_system(
-    user_name: str | None = None, org_name: str | None = None
-) -> dict:
+async def bootstrap_system() -> dict:
     """
     Bootstrap the entire system with default data.
 
-    Args:
-        user_name: Display name for the admin user (default: "Admin")
-        org_name: Display name for the organization (default: "Organization")
-
     Returns:
         dict: Contains information about created entities and reset link
     """
@@ -69,7 +64,7 @@ async def bootstrap_system(
     perm0 = Permission(id="auth:admin", display_name="Master Admin")
     await globals.db.instance.create_permission(perm0)
 
-    org = Org(uuid7.create(), org_name or "Organization")
+    org = Org(uuid7.create(), "Organization")
     await globals.db.instance.create_organization(org)
 
     # After creation, org.permissions now includes the auto-created org admin permission
@@ -88,9 +83,9 @@ async def bootstrap_system(
 
     user = User(
         uuid=uuid7.create(),
-        display_name=user_name or "Admin",
+        display_name="Admin",
         role_uuid=role.uuid,
-        created_at=datetime.now(),
+        created_at=datetime.now(timezone.utc),
         visits=0,
     )
     await globals.db.instance.create_user(user)
@@ -158,16 +153,10 @@ async def check_admin_credentials() -> bool:
         return False
 
 
-async def bootstrap_if_needed(
-    default_admin: str | None = None, default_org: str | None = None
-) -> bool:
+async def bootstrap_if_needed() -> bool:
     """
     Check if system needs bootstrapping and perform it if necessary.
 
-    Args:
-        default_admin: Display name for the admin user
-        default_org: Display name for the organization
-
     Returns:
         bool: True if bootstrapping was performed, False if system was already set up
     """
@@ -184,35 +173,17 @@ async def bootstrap_if_needed(
 
     # 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(default_admin, default_org)
+    await bootstrap_system()
     return True
 
 
 # CLI interface
 async def main():
     """Main CLI entry point for bootstrapping."""
-    import argparse
-
     # Configure logging for CLI usage
     logging.basicConfig(level=logging.INFO, format="%(message)s", force=True)
 
-    parser = argparse.ArgumentParser(
-        description="Bootstrap passkey authentication system"
-    )
-    parser.add_argument(
-        "--user-name",
-        default=None,
-        help="Name for the admin user (default: Admin)",
-    )
-    parser.add_argument(
-        "--org-name",
-        default=None,
-        help="Name for the organization (default: Organization)",
-    )
-
-    args = parser.parse_args()
-
-    await globals.init(default_admin=args.user_name, default_org=args.org_name)
+    await globals.init()
 
 
 if __name__ == "__main__":

paskia/config.py

@@ -0,0 +1,25 @@
+from dataclasses import dataclass
+from datetime import timedelta
+
+# Shared configuration constants for session management.
+SESSION_LIFETIME = timedelta(hours=24)
+
+# Lifetime for reset links created by admins
+RESET_LIFETIME = timedelta(days=14)
+
+
+@dataclass
+class PaskiaConfig:
+    """Runtime configuration for the Paskia authentication server."""
+
+    rp_id: str
+    rp_name: str | None
+    origins: list[str] | None
+    auth_host: str | None
+    site_url: str  # Base URL without trailing path (e.g. https://example.com)
+    site_path: str  # Path to auth UI: "/" if auth_host, else "/auth/"
+    # Listen address (one of host:port or uds)
+    host: str | None = None
+    port: int | None = None
+    uds: str | None = None
+    devmode: bool = False

paskia/db/__init__.py

@@ -63,9 +63,27 @@ class Credential:
 class Session:
     key: bytes
     user_uuid: UUID
-    expires: datetime
-    info: dict
-    credential_uuid: UUID | None = None
+    credential_uuid: UUID
+    host: str
+    ip: str
+    user_agent: str
+    renewed: datetime
+
+    def metadata(self) -> dict:
+        """Return session metadata for backwards compatibility."""
+        return {
+            "ip": self.ip,
+            "user_agent": self.user_agent,
+            "renewed": self.renewed.isoformat(),
+        }
+
+
+@dataclass
+class ResetToken:
+    key: bytes
+    user_uuid: UUID
+    expiry: datetime
+    token_type: str
 
 
 @dataclass
@@ -74,6 +92,7 @@ class SessionContext:
     user: User
     org: Org
     role: Role
+    credential: Credential | None = None
     permissions: list[Permission] | None = None
 
 
@@ -146,9 +165,11 @@ class DatabaseInterface(ABC):
         self,
         user_uuid: UUID,
         key: bytes,
-        expires: datetime,
-        info: dict,
-        credential_uuid: UUID | None = None,
+        credential_uuid: UUID,
+        host: str,
+        ip: str,
+        user_agent: str,
+        renewed: datetime,
     ) -> None:
         """Create a new session."""
 
@@ -162,14 +183,50 @@ class DatabaseInterface(ABC):
 
     @abstractmethod
     async def update_session(
-        self, key: bytes, expires: datetime, info: dict
+        self,
+        key: bytes,
+        *,
+        ip: str,
+        user_agent: str,
+        renewed: datetime,
     ) -> Session | None:
-        """Update session expiry and info."""
+        """Update session metadata and touch renewed timestamp."""
+
+    @abstractmethod
+    async def set_session_host(self, key: bytes, host: str) -> None:
+        """Bind a session to a specific host if not already set."""
+
+    @abstractmethod
+    async def list_sessions_for_user(self, user_uuid: UUID) -> list[Session]:
+        """Return all sessions for a user (including other hosts)."""
 
     @abstractmethod
     async def cleanup(self) -> None:
         """Called periodically to clean up expired records."""
 
+    @abstractmethod
+    async def delete_sessions_for_user(self, user_uuid: UUID) -> None:
+        """Delete all sessions belonging to the provided user."""
+
+    # Reset token operations
+    @abstractmethod
+    async def create_reset_token(
+        self,
+        user_uuid: UUID,
+        key: bytes,
+        expiry: datetime,
+        token_type: str,
+    ) -> None:
+        """Create a reset token for a user."""
+
+    @abstractmethod
+    async def get_reset_token(self, key: bytes) -> ResetToken | None:
+        """Retrieve a reset token by key."""
+
+    @abstractmethod
+    async def delete_reset_token(self, key: bytes) -> None:
+        """Delete a reset token by key."""
+
     # Organization operations
     @abstractmethod
     async def create_organization(self, org: Org) -> None:
@@ -315,7 +372,9 @@ class DatabaseInterface(ABC):
         """Create a new user and their first credential in a transaction."""
 
     @abstractmethod
-    async def get_session_context(self, session_key: bytes) -> SessionContext | None:
+    async def get_session_context(
+        self, session_key: bytes, host: str | None = None
+    ) -> SessionContext | None:
         """Get complete session context including user, organization, role, and permissions."""
 
     # Combined atomic operations
@@ -326,15 +385,17 @@ class DatabaseInterface(ABC):
         credential: Credential,
         reset_key: bytes | None,
         session_key: bytes,
-            session_expires: datetime,
-            session_info: dict,
+        *,
         display_name: str | None = None,
+        host: str | None = None,
+        ip: str | None = None,
+        user_agent: str | None = None,
     ) -> None:
         """Atomically add a credential and create a session.
 
         Steps (single transaction):
             1. Insert credential
-                2. Optionally delete old session (e.g. reset token) if provided
+            2. Optionally delete old reset token if provided
             3. Optionally update user's display name
             4. Insert new session referencing the credential
             5. Update user's last_seen and increment visits (treat as a login)
@@ -345,6 +406,7 @@ __all__ = [
     "User",
     "Credential",
     "Session",
+    "ResetToken",
     "SessionContext",
     "Org",
     "Role",

paskia/db/sql.py

@@ -5,8 +5,9 @@ This module provides an async database layer using SQLAlchemy async mode
 for managing users and credentials in a WebAuthn authentication system.
 """
 
+import os
 from contextlib import asynccontextmanager
-from datetime import datetime
+from datetime import datetime, timezone
 from uuid import UUID
 
 from sqlalchemy import (
@@ -17,30 +18,43 @@ from sqlalchemy import (
     String,
     delete,
     event,
+    insert,
     select,
+    text,
     update,
 )
-from sqlalchemy.dialects.sqlite import BLOB, JSON
+from sqlalchemy.dialects.sqlite import BLOB
 from sqlalchemy.ext.asyncio import async_sessionmaker, create_async_engine
 from sqlalchemy.orm import DeclarativeBase, Mapped, mapped_column
 
-from ..globals import db
-from . import (
+from paskia.config import SESSION_LIFETIME
+from paskia.db import (
     Credential,
     DatabaseInterface,
     Org,
     Permission,
+    ResetToken,
     Role,
     Session,
     SessionContext,
     User,
 )
+from paskia.globals import db
 
-DB_PATH = "sqlite+aiosqlite:///passkey-auth.sqlite"
+DB_PATH_DEFAULT = "sqlite+aiosqlite:///paskia.sqlite"
+
+
+def _normalize_dt(value: datetime | None) -> datetime | None:
+    if value is None:
+        return None
+    if value.tzinfo is None:
+        return value.replace(tzinfo=timezone.utc)
+    return value.astimezone(timezone.utc)
 
 
 async def init(*args, **kwargs):
-    db.instance = DB()
+    db_path = os.environ.get("PASKIA_DB", DB_PATH_DEFAULT)
+    db.instance = DB(db_path)
     await db.instance.init_db()
 
 
@@ -97,8 +111,12 @@ class UserModel(Base):
     role_uuid: Mapped[bytes] = mapped_column(
         LargeBinary(16), ForeignKey("roles.uuid", ondelete="CASCADE"), nullable=False
     )
-    created_at: Mapped[datetime] = mapped_column(DateTime, default=datetime.now)
-    last_seen: Mapped[datetime | None] = mapped_column(DateTime, nullable=True)
+    created_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True), default=lambda: datetime.now(timezone.utc)
+    )
+    last_seen: Mapped[datetime | None] = mapped_column(
+        DateTime(timezone=True), nullable=True
+    )
     visits: Mapped[int] = mapped_column(Integer, nullable=False, default=0)
 
     def as_dataclass(self) -> User:
@@ -106,8 +124,8 @@ class UserModel(Base):
             uuid=UUID(bytes=self.uuid),
             display_name=self.display_name,
             role_uuid=UUID(bytes=self.role_uuid),
-            created_at=self.created_at,
-            last_seen=self.last_seen,
+            created_at=_normalize_dt(self.created_at) or self.created_at,
+            last_seen=_normalize_dt(self.last_seen) or self.last_seen,
             visits=self.visits,
         )
 
@@ -117,7 +135,7 @@ class UserModel(Base):
             uuid=user.uuid.bytes,
             display_name=user.display_name,
             role_uuid=user.role_uuid.bytes,
-            created_at=user.created_at or datetime.now(),
+            created_at=user.created_at or datetime.now(timezone.utc),
             last_seen=user.last_seen,
             visits=user.visits,
         )
@@ -136,9 +154,29 @@ class CredentialModel(Base):
     aaguid: Mapped[bytes] = mapped_column(LargeBinary(16), nullable=False)
     public_key: Mapped[bytes] = mapped_column(BLOB, nullable=False)
     sign_count: Mapped[int] = mapped_column(Integer, nullable=False)
-    created_at: Mapped[datetime] = mapped_column(DateTime, default=datetime.now)
-    last_used: Mapped[datetime | None] = mapped_column(DateTime, nullable=True)
-    last_verified: Mapped[datetime | None] = mapped_column(DateTime, nullable=True)
+    created_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True), default=lambda: datetime.now(timezone.utc)
+    )
+    # Columns declared timezone-aware going forward; legacy rows may still be naive in storage
+    last_used: Mapped[datetime | None] = mapped_column(
+        DateTime(timezone=True), nullable=True
+    )
+    last_verified: Mapped[datetime | None] = mapped_column(
+        DateTime(timezone=True), nullable=True
+    )
+
+    def as_dataclass(self):  # type: ignore[override]
+        return Credential(
+            uuid=UUID(bytes=self.uuid),
+            credential_id=self.credential_id,
+            user_uuid=UUID(bytes=self.user_uuid),
+            aaguid=UUID(bytes=self.aaguid),
+            public_key=self.public_key,
+            sign_count=self.sign_count,
+            created_at=_normalize_dt(self.created_at) or self.created_at,
+            last_used=_normalize_dt(self.last_used) or self.last_used,
+            last_verified=_normalize_dt(self.last_verified) or self.last_verified,
+        )
 
 
 class SessionModel(Base):
@@ -146,23 +184,31 @@ class SessionModel(Base):
 
     key: Mapped[bytes] = mapped_column(LargeBinary(16), primary_key=True)
     user_uuid: Mapped[bytes] = mapped_column(
-        LargeBinary(16), ForeignKey("users.uuid", ondelete="CASCADE")
+        LargeBinary(16), ForeignKey("users.uuid", ondelete="CASCADE"), nullable=False
     )
-    credential_uuid: Mapped[bytes | None] = mapped_column(
-        LargeBinary(16), ForeignKey("credentials.uuid", ondelete="CASCADE")
+    credential_uuid: Mapped[bytes] = mapped_column(
+        LargeBinary(16),
+        ForeignKey("credentials.uuid", ondelete="CASCADE"),
+        nullable=False,
+    )
+    host: Mapped[str] = mapped_column(String, nullable=False)
+    ip: Mapped[str] = mapped_column(String(64), nullable=False)
+    user_agent: Mapped[str] = mapped_column(String(512), nullable=False)
+    renewed: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True),
+        default=lambda: datetime.now(timezone.utc),
+        nullable=False,
     )
-    expires: Mapped[datetime] = mapped_column(DateTime, nullable=False)
-    info: Mapped[dict] = mapped_column(JSON, default=dict)
 
     def as_dataclass(self):
         return Session(
             key=self.key,
             user_uuid=UUID(bytes=self.user_uuid),
-            credential_uuid=(
-                UUID(bytes=self.credential_uuid) if self.credential_uuid else None
-            ),
-            expires=self.expires,
-            info=self.info,
+            credential_uuid=UUID(bytes=self.credential_uuid),
+            host=self.host,
+            ip=self.ip,
+            user_agent=self.user_agent,
+            renewed=_normalize_dt(self.renewed) or self.renewed,
         )
 
     @staticmethod
@@ -170,9 +216,30 @@ class SessionModel(Base):
         return SessionModel(
             key=session.key,
             user_uuid=session.user_uuid.bytes,
-            credential_uuid=session.credential_uuid and session.credential_uuid.bytes,
-            expires=session.expires,
-            info=session.info,
+            credential_uuid=session.credential_uuid.bytes,
+            host=session.host,
+            ip=session.ip,
+            user_agent=session.user_agent,
+            renewed=session.renewed,
+        )
+
+
+class ResetTokenModel(Base):
+    __tablename__ = "reset_tokens"
+
+    key: Mapped[bytes] = mapped_column(LargeBinary(16), primary_key=True)
+    user_uuid: Mapped[bytes] = mapped_column(
+        LargeBinary(16), ForeignKey("users.uuid", ondelete="CASCADE"), nullable=False
+    )
+    token_type: Mapped[str] = mapped_column(String, nullable=False)
+    expiry: Mapped[datetime] = mapped_column(DateTime(timezone=True), nullable=False)
+
+    def as_dataclass(self) -> ResetToken:
+        return ResetToken(
+            key=self.key,
+            user_uuid=UUID(bytes=self.user_uuid),
+            token_type=self.token_type,
+            expiry=_normalize_dt(self.expiry) or self.expiry,
         )
 
 
@@ -224,7 +291,7 @@ class RolePermission(Base):
 class DB(DatabaseInterface):
     """Database class that handles its own connections."""
 
-    def __init__(self, db_path: str = DB_PATH):
+    def __init__(self, db_path: str = DB_PATH_DEFAULT):
         """Initialize with database path."""
         self.engine = create_async_engine(db_path, echo=False)
         # Ensure SQLite foreign key enforcement is ON for every new connection
@@ -256,6 +323,58 @@ class DB(DatabaseInterface):
         """Initialize database tables."""
         async with self.engine.begin() as conn:
             await conn.run_sync(Base.metadata.create_all)
+            result = await conn.execute(text("PRAGMA table_info('sessions')"))
+            columns = {row[1] for row in result}
+            expected = {
+                "key",
+                "user_uuid",
+                "credential_uuid",
+                "host",
+                "ip",
+                "user_agent",
+                "renewed",
+            }
+            needs_recreate = False
+            if columns and columns != expected:
+                await conn.execute(text("DROP TABLE sessions"))
+                needs_recreate = True
+            result = await conn.execute(text("PRAGMA table_info('reset_tokens')"))
+            if not list(result):
+                needs_recreate = True
+            if needs_recreate:
+                await conn.run_sync(Base.metadata.create_all)
+        # Run one-time migration to add UTC tzinfo to any naive datetimes
+        await self._migrate_naive_datetimes()
+
+    async def _migrate_naive_datetimes(self) -> None:
+        """Attach UTC tzinfo to any legacy naive datetime rows.
+
+        SQLite stores datetimes as text; older rows may have been inserted naive.
+        We treat naive timestamps as already UTC and rewrite them in ISO8601 with Z.
+        """
+        # Helper SQL fragment for detecting naive (no timezone offset) for ISO strings
+        # We only update rows whose textual representation lacks a 'Z' or '+' sign.
+        async with self.session() as session:
+            # Users
+            for model, fields in [
+                (UserModel, ["created_at", "last_seen"]),
+                (CredentialModel, ["created_at", "last_used", "last_verified"]),
+                (SessionModel, ["renewed"]),
+                (ResetTokenModel, ["expiry"]),
+            ]:
+                stmt = select(model)
+                result = await session.execute(stmt)
+                rows = result.scalars().all()
+                dirty = False
+                for row in rows:
+                    for fname in fields:
+                        value = getattr(row, fname, None)
+                        if isinstance(value, datetime) and value.tzinfo is None:
+                            setattr(row, fname, value.replace(tzinfo=timezone.utc))
+                            dirty = True
+                if dirty:
+                    # SQLAlchemy autoflush/commit in context manager will persist
+                    pass
 
     async def get_user_by_uuid(self, user_uuid: UUID) -> User:
         async with self.session() as session:
@@ -322,7 +441,7 @@ class DB(DatabaseInterface):
             credential_model = result.scalar_one_or_none()
 
             if not credential_model:
-                raise ValueError("Credential not registered")
+                raise ValueError("Credential not found")
             return Credential(
                 uuid=UUID(bytes=credential_model.uuid),
                 credential_id=credential_model.credential_id,
@@ -408,9 +527,11 @@ class DB(DatabaseInterface):
         credential: Credential,
         reset_key: bytes | None,
         session_key: bytes,
-        session_expires: datetime,
-        session_info: dict,
+        *,
         display_name: str | None = None,
+        host: str | None = None,
+        ip: str | None = None,
+        user_agent: str | None = None,
     ) -> None:
         """Atomic credential + (optional old session delete) + (optional rename) + new session."""
         async with self.session() as session:
@@ -433,10 +554,10 @@ class DB(DatabaseInterface):
                     last_verified=credential.last_verified,
                 )
             )
-            # Delete old session if provided
+            # Delete old reset token if provided
             if reset_key:
                 await session.execute(
-                    delete(SessionModel).where(SessionModel.key == reset_key)
+                    delete(ResetTokenModel).where(ResetTokenModel.key == reset_key)
                 )
             # Optional rename
             if display_name:
@@ -451,8 +572,9 @@ class DB(DatabaseInterface):
                     key=session_key,
                     user_uuid=user_uuid.bytes,
                     credential_uuid=credential.uuid.bytes,
-                    expires=session_expires,
-                    info=session_info,
+                    host=host,
+                    ip=ip,
+                    user_agent=user_agent,
                 )
             )
             # Login side-effects: update user analytics (last_seen + visits increment)
@@ -475,17 +597,21 @@ class DB(DatabaseInterface):
         self,
         user_uuid: UUID,
         key: bytes,
-        expires: datetime,
-        info: dict,
-        credential_uuid: UUID | None = None,
+        credential_uuid: UUID,
+        host: str,
+        ip: str,
+        user_agent: str,
+        renewed: datetime,
     ) -> None:
         async with self.session() as session:
             session_model = SessionModel(
                 key=key,
                 user_uuid=user_uuid.bytes,
-                credential_uuid=credential_uuid.bytes if credential_uuid else None,
-                expires=expires,
-                info=info,
+                credential_uuid=credential_uuid.bytes,
+                host=host,
+                ip=ip,
+                user_agent=user_agent,
+                renewed=renewed,
             )
             session.add(session_model)
 
@@ -496,29 +622,88 @@ class DB(DatabaseInterface):
             session_model = result.scalar_one_or_none()
 
             if session_model:
-                return Session(
-                    key=session_model.key,
-                    user_uuid=UUID(bytes=session_model.user_uuid),
-                    credential_uuid=UUID(bytes=session_model.credential_uuid)
-                    if session_model.credential_uuid
-                    else None,
-                    expires=session_model.expires,
-                    info=session_model.info or {},
-                )
+                return session_model.as_dataclass()
             return None
 
     async def delete_session(self, key: bytes) -> None:
         async with self.session() as session:
             await session.execute(delete(SessionModel).where(SessionModel.key == key))
 
-    async def update_session(self, key: bytes, expires: datetime, info: dict) -> None:
+    async def delete_sessions_for_user(self, user_uuid: UUID) -> None:
         async with self.session() as session:
             await session.execute(
-                update(SessionModel)
-                .where(SessionModel.key == key)
-                .values(expires=expires, info=info)
+                delete(SessionModel).where(SessionModel.user_uuid == user_uuid.bytes)
             )
 
+    async def create_reset_token(
+        self,
+        user_uuid: UUID,
+        key: bytes,
+        expiry: datetime,
+        token_type: str,
+    ) -> None:
+        async with self.session() as session:
+            model = ResetTokenModel(
+                key=key,
+                user_uuid=user_uuid.bytes,
+                token_type=token_type,
+                expiry=expiry,
+            )
+            session.add(model)
+
+    async def get_reset_token(self, key: bytes) -> ResetToken | None:
+        async with self.session() as session:
+            stmt = select(ResetTokenModel).where(ResetTokenModel.key == key)
+            result = await session.execute(stmt)
+            model = result.scalar_one_or_none()
+            return model.as_dataclass() if model else None
+
+    async def delete_reset_token(self, key: bytes) -> None:
+        async with self.session() as session:
+            await session.execute(
+                delete(ResetTokenModel).where(ResetTokenModel.key == key)
+            )
+
+    async def update_session(
+        self,
+        key: bytes,
+        *,
+        ip: str,
+        user_agent: str,
+        renewed: datetime,
+    ) -> Session | None:
+        async with self.session() as session:
+            model = await session.get(SessionModel, key)
+            if not model:
+                return None
+            model.ip = ip
+            model.user_agent = user_agent
+            model.renewed = renewed
+            await session.flush()
+            return model.as_dataclass()
+
+    async def set_session_host(self, key: bytes, host: str) -> None:
+        async with self.session() as session:
+            model = await session.get(SessionModel, key)
+            if model and model.host is None:
+                model.host = host
+                await session.flush()
+
+    async def list_sessions_for_user(self, user_uuid: UUID) -> list[Session]:
+        async with self.session() as session:
+            stmt = (
+                select(SessionModel)
+                .where(SessionModel.user_uuid == user_uuid.bytes)
+                .order_by(SessionModel.renewed.desc())
+            )
+            result = await session.execute(stmt)
+            session_models = [
+                model
+                for model in result.scalars().all()
+                if model.key.startswith(b"sess")
+            ]
+            return [model.as_dataclass() for model in session_models]
+
     # Organization operations
     async def create_organization(self, org: Org) -> None:
         async with self.session() as session:
@@ -971,8 +1156,10 @@ class DB(DatabaseInterface):
             )
             if role.permissions:
                 for perm_id in set(role.permissions):
-                    session.add(
-                        RolePermission(role_uuid=role.uuid.bytes, permission_id=perm_id)
+                    await session.execute(
+                        insert(RolePermission).values(
+                            role_uuid=role.uuid.bytes, permission_id=perm_id
+                        )
                     )
 
     async def delete_role(self, role_uuid: UUID) -> None:
@@ -1112,29 +1299,41 @@ class DB(DatabaseInterface):
 
     async def cleanup(self) -> None:
         async with self.session() as session:
-            current_time = datetime.now()
-            stmt = delete(SessionModel).where(SessionModel.expires < current_time)
-            await session.execute(stmt)
+            current_time = datetime.now(timezone.utc)
+            session_threshold = current_time - SESSION_LIFETIME
+            await session.execute(
+                delete(SessionModel).where(SessionModel.renewed < session_threshold)
+            )
+            await session.execute(
+                delete(ResetTokenModel).where(ResetTokenModel.expiry < current_time)
+            )
 
-    async def get_session_context(self, session_key: bytes) -> SessionContext | None:
+    async def get_session_context(
+        self, session_key: bytes, host: str | None = None
+    ) -> SessionContext | None:
         """Get complete session context including user, organization, role, and permissions.
 
         Uses efficient JOINs to retrieve all related data in a single database query.
         """
         async with self.session() as session:
-            # Build a query that joins sessions, users, roles, organizations, and role_permissions
+            # Build a query that joins sessions, users, roles, organizations, credentials and role_permissions
             stmt = (
                 select(
                     SessionModel,
                     UserModel,
                     RoleModel,
                     OrgModel,
+                    CredentialModel,
                     PermissionModel,
                 )
                 .select_from(SessionModel)
                 .join(UserModel, SessionModel.user_uuid == UserModel.uuid)
                 .join(RoleModel, UserModel.role_uuid == RoleModel.uuid)
                 .join(OrgModel, RoleModel.org_uuid == OrgModel.uuid)
+                .outerjoin(
+                    CredentialModel,
+                    SessionModel.credential_uuid == CredentialModel.uuid,
+                )
                 .outerjoin(RolePermission, RoleModel.uuid == RolePermission.role_uuid)
                 .outerjoin(
                     PermissionModel, RolePermission.permission_id == PermissionModel.id
@@ -1150,18 +1349,23 @@ class DB(DatabaseInterface):
 
             # Extract the first row to get session and user data
             first_row = rows[0]
-            session_model, user_model, role_model, org_model, _ = first_row
+            session_model, user_model, role_model, org_model, credential_model, _ = (
+                first_row
+            )
 
             # Create the session object
-            session_obj = Session(
-                key=session_model.key,
-                user_uuid=UUID(bytes=session_model.user_uuid),
-                credential_uuid=UUID(bytes=session_model.credential_uuid)
-                if session_model.credential_uuid
-                else None,
-                expires=session_model.expires,
-                info=session_model.info or {},
+            if host is not None:
+                if session_model.host is None:
+                    await session.execute(
+                        update(SessionModel)
+                        .where(SessionModel.key == session_key)
+                        .values(host=host)
                     )
+                    session_model.host = host
+                elif session_model.host != host:
+                    return None
+
+            session_obj = session_model.as_dataclass()
 
             # Create the user object
             user_obj = user_model.as_dataclass()
@@ -1176,11 +1380,16 @@ class DB(DatabaseInterface):
                 display_name=role_model.display_name,
             )
 
+            # Create credential object if available
+            credential_obj = (
+                credential_model.as_dataclass() if credential_model else None
+            )
+
             # Collect all unique permissions for the role
             permissions = []
             seen_permission_ids = set()
             for row in rows:
-                _, _, _, _, permission_model = row
+                _, _, _, _, _, permission_model = row
                 if permission_model and permission_model.id not in seen_permission_ids:
                     permissions.append(
                         Permission(
@@ -1200,10 +1409,16 @@ class DB(DatabaseInterface):
             org_perm_result = await session.execute(org_perm_stmt)
             organization.permissions = [row[0] for row in org_perm_result.fetchall()]
 
+            # Filter effective permissions: only include permissions that the org can grant
+            effective_permissions = [
+                p for p in permissions if p.id in organization.permissions
+            ]
+
             return SessionContext(
                 session=session_obj,
                 user=user_obj,
                 org=organization,
                 role=role,
-                permissions=permissions if permissions else None,
+                credential=credential_obj,
+                permissions=effective_permissions if effective_permissions else None,
             )

paskia/fastapi/__init__.py

@@ -0,0 +1,3 @@
+from paskia.fastapi.mainapp import app
+
+__all__ = ["app"]

paskia/fastapi/__main__.py

@@ -7,11 +7,31 @@ from urllib.parse import urlparse
 
 import uvicorn
 
-from passkey.util import frontend
+from paskia.util.hostutil import normalize_origin
 
 DEFAULT_HOST = "localhost"
 DEFAULT_SERVE_PORT = 4401
-DEFAULT_DEV_PORT = 4402
+
+
+def is_subdomain(sub: str, domain: str) -> bool:
+    """Check if sub is a subdomain of domain (or equal)."""
+    sub_parts = sub.lower().split(".")
+    domain_parts = domain.lower().split(".")
+    if len(sub_parts) < len(domain_parts):
+        return False
+    return sub_parts[-len(domain_parts) :] == domain_parts
+
+
+def validate_auth_host(auth_host: str, rp_id: str) -> None:
+    """Validate that auth_host is a subdomain of rp_id."""
+    parsed = urlparse(auth_host if "://" in auth_host else f"//{auth_host}")
+    host = parsed.hostname or parsed.path
+    if not host:
+        raise SystemExit(f"Invalid auth-host: '{auth_host}'")
+    if not is_subdomain(host, rp_id):
+        raise SystemExit(
+            f"auth-host '{auth_host}' is not a subdomain of rp-id '{rp_id}'"
+        )
 
 
 def parse_endpoint(
@@ -93,7 +113,20 @@ def add_common_options(p: argparse.ArgumentParser) -> None:
         "--rp-id", default="localhost", help="Relying Party ID (default: localhost)"
     )
     p.add_argument("--rp-name", help="Relying Party name (default: same as rp-id)")
-    p.add_argument("--origin", help="Origin URL (default: https://<rp-id>)")
+    p.add_argument(
+        "--origin",
+        action="append",
+        dest="origins",
+        metavar="URL",
+        help="Allowed origin URL(s). May be specified multiple times. If any are specified, only those origins are permitted for WebSocket authentication.",
+    )
+    p.add_argument(
+        "--auth-host",
+        help=(
+            "Dedicated host (optionally with scheme/port) to serve the auth UI at the root,"
+            " e.g. auth.example.com or https://auth.example.com"
+        ),
+    )
 
 
 def main():
@@ -101,7 +134,7 @@ def main():
     logging.basicConfig(level=logging.INFO, format="%(message)s", force=True)
 
     parser = argparse.ArgumentParser(
-        prog="passkey-auth", description="Passkey authentication server"
+        prog="paskia", description="Paskia authentication server"
     )
     sub = parser.add_subparsers(dest="command", required=True)
 
@@ -119,18 +152,6 @@ def main():
     )
     add_common_options(serve)
 
-    # dev subcommand
-    dev = sub.add_parser("dev", help="Run the server in development (auto-reload)")
-    dev.add_argument(
-        "hostport",
-        nargs="?",
-        help=(
-            "Endpoint (default: localhost:4402). Forms: host[:port] | :port | "
-            "[ipv6][:port] | ipv6 | unix:/path.sock"
-        ),
-    )
-    add_common_options(dev)
-
     # reset subcommand
     reset = sub.add_parser(
         "reset",
@@ -148,54 +169,125 @@ def main():
 
     args = parser.parse_args()
 
-    if args.command in {"serve", "dev"}:
-        default_port = DEFAULT_DEV_PORT if args.command == "dev" else DEFAULT_SERVE_PORT
-        host, port, uds, all_ifaces = parse_endpoint(args.hostport, default_port)
-        devmode = args.command == "dev"
+    if args.command == "serve":
+        host, port, uds, all_ifaces = parse_endpoint(args.hostport, DEFAULT_SERVE_PORT)
     else:
         host = port = uds = all_ifaces = None  # type: ignore
-        devmode = False
 
-    # Determine origin (dev mode default override)
-    origin = args.origin
-    if devmode and not args.origin and not args.rp_id:
-        # Dev mode: Vite runs on another port, override:
-        origin = "http://localhost:4403"
+    # Collect and normalize origins, handle auth_host
+    origins = [normalize_origin(o) for o in (getattr(args, "origins", None) or [])]
+    if args.auth_host:
+        # Normalize auth_host with scheme
+        if "://" not in args.auth_host:
+            args.auth_host = f"https://{args.auth_host}"
 
-    # Export configuration via environment for lifespan initialization in each process
-    os.environ.setdefault("PASSKEY_RP_ID", args.rp_id)
-    if args.rp_name:
-        os.environ["PASSKEY_RP_NAME"] = args.rp_name
-    if origin:
-        os.environ["PASSKEY_ORIGIN"] = origin
+        validate_auth_host(args.auth_host, args.rp_id)
 
-    # One-time initialization + bootstrap before starting any server processes.
-    # Lifespan in worker processes will call globals.init with bootstrap disabled.
-    from passkey import globals as _globals  # local import
+        # If origins are configured, ensure auth_host is included at top
+        if origins:
+            # Insert auth_host at the beginning
+            origins.insert(0, args.auth_host)
+
+    # Remove duplicates while preserving order
+    seen = set()
+    origins = [x for x in origins if not (x in seen or seen.add(x))]
+
+    # Compute site_url and site_path for reset links
+    # Priority: auth_host > first origin with localhost > http://localhost:port
+    if args.auth_host:
+        site_url = args.auth_host.rstrip("/")
+        site_path = "/"
+    elif origins:
+        # Find localhost origin if rp_id is localhost, else use first origin
+        localhost_origin = (
+            next((o for o in origins if "://localhost" in o), None)
+            if args.rp_id == "localhost"
+            else None
+        )
+        site_url = (localhost_origin or origins[0]).rstrip("/")
+        site_path = "/auth/"
+    elif args.rp_id == "localhost" and port:
+        # Dev mode: use http with port
+        site_url = f"http://localhost:{port}"
+        site_path = "/auth/"
+    else:
+        site_url = f"https://{args.rp_id}"
+        site_path = "/auth/"
+
+    # Build runtime configuration
+    from paskia.config import PaskiaConfig
+
+    config = PaskiaConfig(
+        rp_id=args.rp_id,
+        rp_name=args.rp_name or None,
+        origins=origins or None,
+        auth_host=args.auth_host or None,
+        site_url=site_url,
+        site_path=site_path,
+        host=host,
+        port=port,
+        uds=uds,
+    )
+
+    # Export configuration via single JSON env variable for worker processes
+    import json
+
+    config_json = {
+        "rp_id": config.rp_id,
+        "rp_name": config.rp_name,
+        "origins": config.origins,
+        "auth_host": config.auth_host,
+        "site_url": config.site_url,
+        "site_path": config.site_path,
+    }
+    os.environ["PASKIA_CONFIG"] = json.dumps(config_json)
+
+    # Initialize globals (without bootstrap yet)
+    from paskia import globals as _globals  # local import
 
     asyncio.run(
         _globals.init(
-            rp_id=args.rp_id,
-            rp_name=args.rp_name,
-            origin=origin,
-            default_admin=os.getenv("PASSKEY_DEFAULT_ADMIN") or None,
-            default_org=os.getenv("PASSKEY_DEFAULT_ORG") or None,
-            bootstrap=True,
+            rp_id=config.rp_id,
+            rp_name=config.rp_name,
+            origins=config.origins,
+            bootstrap=False,
         )
     )
 
+    # Print startup configuration
+    from paskia.util import startupbox
+
+    startupbox.print_startup_config(config)
+
+    # Bootstrap after startup box is printed
+    from paskia.bootstrap import bootstrap_if_needed
+
+    asyncio.run(bootstrap_if_needed())
+
     # Handle recover-admin command (no server start)
     if args.command == "reset":
-        from passkey.fastapi import reset as reset_cmd  # local import
+        from paskia.fastapi import reset as reset_cmd  # local import
 
         exit_code = reset_cmd.run(getattr(args, "query", None))
         raise SystemExit(exit_code)
 
-    if args.command in {"serve", "dev"}:
+    if args.command == "serve":
         run_kwargs: dict = {
-            "reload": devmode,
             "log_level": "info",
         }
+
+        # Dev mode: enable reload when PASKIA_DEVMODE is set
+        devmode = bool(os.environ.get("PASKIA_DEVMODE"))
+        if devmode:
+            # Security: dev mode must run on localhost:4402 to prevent
+            # accidental public exposure of the Vite dev server
+            if host != "localhost" or port != 4402:
+                raise SystemExit(f"Dev mode requires localhost:4402, got {host}:{port}")
+            run_kwargs["reload"] = True
+            run_kwargs["reload_dirs"] = ["paskia"]
+            # Suppress uvicorn startup messages in dev mode
+            run_kwargs["log_level"] = "warning"
+
         if uds:
             run_kwargs["uds"] = uds
         else:
@@ -203,20 +295,17 @@ def main():
                 run_kwargs["host"] = host
                 run_kwargs["port"] = port
 
-        if devmode:
-            if os.environ.get("PASSKEY_BUN_PARENT") != "1":
-                os.environ["PASSKEY_BUN_PARENT"] = "1"
-                frontend.run_dev()
-
         if all_ifaces and not uds:
+            # Dev mode with all interfaces: use simple single-server approach
             if devmode:
                 run_kwargs["host"] = "::"
                 run_kwargs["port"] = port
-                uvicorn.run("passkey.fastapi:app", **run_kwargs)
+                uvicorn.run("paskia.fastapi:app", **run_kwargs)
             else:
+                # Production: run separate servers for IPv4 and IPv6
                 from uvicorn import Config, Server  # noqa: E402 local import
 
-                from passkey.fastapi import (
+                from paskia.fastapi import (
                     app as fastapi_app,  # noqa: E402 local import
                 )
 
@@ -239,7 +328,7 @@ def main():
 
                 asyncio.run(serve_both())
         else:
-            uvicorn.run("passkey.fastapi:app", **run_kwargs)
+            uvicorn.run("paskia.fastapi:app", **run_kwargs)
 
 
 if __name__ == "__main__":

paskia/fastapi/admin.py

@@ -0,0 +1,850 @@
+import logging
+from datetime import timezone
+from uuid import UUID, uuid4
+
+from fastapi import Body, FastAPI, HTTPException, Request, Response
+from fastapi.responses import JSONResponse
+
+from paskia.authsession import reset_expires
+from paskia.fastapi import authz
+from paskia.fastapi.session import AUTH_COOKIE
+from paskia.globals import db
+from paskia.util import (
+    frontend,
+    hostutil,
+    passphrase,
+    permutil,
+    querysafe,
+    tokens,
+    useragent,
+)
+from paskia.util.tokens import encode_session_key, session_key
+
+app = FastAPI()
+
+
+@app.exception_handler(ValueError)
+async def value_error_handler(_request, exc: ValueError):  # pragma: no cover - simple
+    return JSONResponse(status_code=400, content={"detail": str(exc)})
+
+
+@app.exception_handler(authz.AuthException)
+async def auth_exception_handler(_request, exc: authz.AuthException):
+    """Handle AuthException with auth info for UI."""
+    return JSONResponse(
+        status_code=exc.status_code,
+        content=await authz.auth_error_content(exc),
+    )
+
+
+@app.exception_handler(Exception)
+async def general_exception_handler(_request, exc: Exception):  # pragma: no cover
+    logging.exception("Unhandled exception in admin app")
+    return JSONResponse(status_code=500, content={"detail": "Internal server error"})
+
+
+@app.get("/")
+async def adminapp(request: Request, auth=AUTH_COOKIE):
+    return Response(*await frontend.read("/auth/admin/index.html"))
+
+
+# -------------------- Organizations --------------------
+
+
+@app.get("/orgs")
+async def admin_list_orgs(request: Request, auth=AUTH_COOKIE):
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", "auth:org:*"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+    )
+    orgs = await db.instance.list_organizations()
+    if "auth:admin" not in ctx.role.permissions:
+        orgs = [o for o in orgs if f"auth:org:{o.uuid}" in ctx.role.permissions]
+
+    def role_to_dict(r):
+        return {
+            "uuid": str(r.uuid),
+            "org_uuid": str(r.org_uuid),
+            "display_name": r.display_name,
+            "permissions": r.permissions,
+        }
+
+    async def org_to_dict(o):
+        users = await db.instance.get_organization_users(str(o.uuid))
+        return {
+            "uuid": str(o.uuid),
+            "display_name": o.display_name,
+            "permissions": o.permissions,
+            "roles": [role_to_dict(r) for r in o.roles],
+            "users": [
+                {
+                    "uuid": str(u.uuid),
+                    "display_name": u.display_name,
+                    "role": role_name,
+                    "visits": u.visits,
+                    "last_seen": u.last_seen.isoformat() if u.last_seen else None,
+                }
+                for (u, role_name) in users
+            ],
+        }
+
+    return [await org_to_dict(o) for o in orgs]
+
+
+@app.post("/orgs")
+async def admin_create_org(
+    request: Request, payload: dict = Body(...), auth=AUTH_COOKIE
+):
+    await authz.verify(
+        auth, ["auth:admin"], host=request.headers.get("host"), match=permutil.has_all
+    )
+    from ..db import Org as OrgDC  # local import to avoid cycles
+    from ..db import Role as RoleDC  # local import to avoid cycles
+
+    org_uuid = uuid4()
+    display_name = payload.get("display_name") or "New Organization"
+    permissions = payload.get("permissions") or []
+    org = OrgDC(uuid=org_uuid, display_name=display_name, permissions=permissions)
+    await db.instance.create_organization(org)
+
+    # Automatically create Administration role with org admin permission
+    role_uuid = uuid4()
+    admin_role = RoleDC(
+        uuid=role_uuid,
+        org_uuid=org_uuid,
+        display_name="Administration",
+        permissions=[f"auth:org:{org_uuid}"],
+    )
+    await db.instance.create_role(admin_role)
+
+    return {"uuid": str(org_uuid)}
+
+
+@app.put("/orgs/{org_uuid}")
+async def admin_update_org(
+    org_uuid: UUID,
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
+):
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+    )
+    from ..db import Org as OrgDC  # local import to avoid cycles
+
+    current = await db.instance.get_organization(str(org_uuid))
+    display_name = payload.get("display_name") or current.display_name
+    permissions = payload.get("permissions")
+    if permissions is None:
+        permissions = current.permissions or []
+
+    # Sanity check: prevent removing permissions that would break current user's admin access
+    org_admin_perm = f"auth:org:{org_uuid}"
+
+    # If current user is org admin (not global admin), ensure org admin perm remains
+    if (
+        "auth:admin" not in ctx.role.permissions
+        and f"auth:org:{org_uuid}" in ctx.role.permissions
+    ):
+        if org_admin_perm not in permissions:
+            raise ValueError(
+                "Cannot remove organization admin permission from your own organization"
+            )
+
+    org = OrgDC(uuid=org_uuid, display_name=display_name, permissions=permissions)
+    await db.instance.update_organization(org)
+    return {"status": "ok"}
+
+
+@app.delete("/orgs/{org_uuid}")
+async def admin_delete_org(org_uuid: UUID, request: Request, auth=AUTH_COOKIE):
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+        max_age="5m",
+    )
+    if ctx.org.uuid == org_uuid:
+        raise ValueError("Cannot delete the organization you belong to")
+
+    # Delete organization-specific permissions
+    org_perm_pattern = f"org:{str(org_uuid).lower()}"
+    all_permissions = await db.instance.list_permissions()
+    for perm in all_permissions:
+        perm_id_lower = perm.id.lower()
+        # Check if permission contains "org:{uuid}" separated by colons or at boundaries
+        if (
+            f":{org_perm_pattern}:" in perm_id_lower
+            or perm_id_lower.startswith(f"{org_perm_pattern}:")
+            or perm_id_lower.endswith(f":{org_perm_pattern}")
+            or perm_id_lower == org_perm_pattern
+        ):
+            await db.instance.delete_permission(perm.id)
+
+    await db.instance.delete_organization(org_uuid)
+    return {"status": "ok"}
+
+
+@app.post("/orgs/{org_uuid}/permission")
+async def admin_add_org_permission(
+    org_uuid: UUID,
+    permission_id: str,
+    request: Request,
+    auth=AUTH_COOKIE,
+):
+    await authz.verify(
+        auth, ["auth:admin"], host=request.headers.get("host"), match=permutil.has_all
+    )
+    await db.instance.add_permission_to_organization(str(org_uuid), permission_id)
+    return {"status": "ok"}
+
+
+@app.delete("/orgs/{org_uuid}/permission")
+async def admin_remove_org_permission(
+    org_uuid: UUID,
+    permission_id: str,
+    request: Request,
+    auth=AUTH_COOKIE,
+):
+    await authz.verify(
+        auth, ["auth:admin"], host=request.headers.get("host"), match=permutil.has_all
+    )
+    await db.instance.remove_permission_from_organization(str(org_uuid), permission_id)
+    return {"status": "ok"}
+
+
+# -------------------- Roles --------------------
+
+
+@app.post("/orgs/{org_uuid}/roles")
+async def admin_create_role(
+    org_uuid: UUID,
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
+):
+    await authz.verify(
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+    )
+    from ..db import Role as RoleDC
+
+    role_uuid = uuid4()
+    display_name = payload.get("display_name") or "New Role"
+    perms = payload.get("permissions") or []
+    org = await db.instance.get_organization(str(org_uuid))
+    grantable = set(org.permissions or [])
+    for pid in perms:
+        await db.instance.get_permission(pid)
+        if pid not in grantable:
+            raise ValueError(f"Permission not grantable by org: {pid}")
+    role = RoleDC(
+        uuid=role_uuid,
+        org_uuid=org_uuid,
+        display_name=display_name,
+        permissions=perms,
+    )
+    await db.instance.create_role(role)
+    return {"uuid": str(role_uuid)}
+
+
+@app.put("/orgs/{org_uuid}/roles/{role_uuid}")
+async def admin_update_role(
+    org_uuid: UUID,
+    role_uuid: UUID,
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
+):
+    # Verify caller is global admin or admin of provided org
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+    )
+    role = await db.instance.get_role(role_uuid)
+    if role.org_uuid != org_uuid:
+        raise HTTPException(status_code=404, detail="Role not found in organization")
+    from ..db import Role as RoleDC
+
+    display_name = payload.get("display_name") or role.display_name
+    permissions = payload.get("permissions")
+    if permissions is None:
+        permissions = role.permissions
+    org = await db.instance.get_organization(str(org_uuid))
+    grantable = set(org.permissions or [])
+    existing_permissions = set(role.permissions)
+    for pid in permissions:
+        await db.instance.get_permission(pid)
+        if pid not in existing_permissions and pid not in grantable:
+            raise ValueError(f"Permission not grantable by org: {pid}")
+
+    # Sanity check: prevent admin from removing their own access via role update
+    if ctx.org.uuid == org_uuid and ctx.role.uuid == role_uuid:
+        has_admin_access = (
+            "auth:admin" in permissions or f"auth:org:{org_uuid}" in permissions
+        )
+        if not has_admin_access:
+            raise ValueError("Cannot update your own role to remove admin permissions")
+
+    updated = RoleDC(
+        uuid=role_uuid,
+        org_uuid=org_uuid,
+        display_name=display_name,
+        permissions=permissions,
+    )
+    await db.instance.update_role(updated)
+    return {"status": "ok"}
+
+
+@app.delete("/orgs/{org_uuid}/roles/{role_uuid}")
+async def admin_delete_role(
+    org_uuid: UUID,
+    role_uuid: UUID,
+    request: Request,
+    auth=AUTH_COOKIE,
+):
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+        max_age="5m",
+    )
+    role = await db.instance.get_role(role_uuid)
+    if role.org_uuid != org_uuid:
+        raise HTTPException(status_code=404, detail="Role not found in organization")
+
+    # Sanity check: prevent admin from deleting their own role
+    if ctx.role.uuid == role_uuid:
+        raise ValueError("Cannot delete your own role")
+
+    await db.instance.delete_role(role_uuid)
+    return {"status": "ok"}
+
+
+# -------------------- Users --------------------
+
+
+@app.post("/orgs/{org_uuid}/users")
+async def admin_create_user(
+    org_uuid: UUID,
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
+):
+    await authz.verify(
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+    )
+    display_name = payload.get("display_name")
+    role_name = payload.get("role")
+    if not display_name or not role_name:
+        raise ValueError("display_name and role are required")
+    from ..db import User as UserDC
+
+    roles = await db.instance.get_roles_by_organization(str(org_uuid))
+    role_obj = next((r for r in roles if r.display_name == role_name), None)
+    if not role_obj:
+        raise ValueError("Role not found in organization")
+    user_uuid = uuid4()
+    user = UserDC(
+        uuid=user_uuid,
+        display_name=display_name,
+        role_uuid=role_obj.uuid,
+        visits=0,
+        created_at=None,
+    )
+    await db.instance.create_user(user)
+    return {"uuid": str(user_uuid)}
+
+
+@app.put("/orgs/{org_uuid}/users/{user_uuid}/role")
+async def admin_update_user_role(
+    org_uuid: UUID,
+    user_uuid: UUID,
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
+):
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+    )
+    new_role = payload.get("role")
+    if not new_role:
+        raise ValueError("role is required")
+    try:
+        user_org, _current_role = await db.instance.get_user_organization(user_uuid)
+    except ValueError:
+        raise ValueError("User not found")
+    if user_org.uuid != org_uuid:
+        raise ValueError("User does not belong to this organization")
+    roles = await db.instance.get_roles_by_organization(str(org_uuid))
+    if not any(r.display_name == new_role for r in roles):
+        raise ValueError("Role not found in organization")
+
+    # Sanity check: prevent admin from removing their own access
+    if ctx.user.uuid == user_uuid:
+        new_role_obj = next((r for r in roles if r.display_name == new_role), None)
+        if new_role_obj:  # pragma: no branch - always true, role validated above
+            has_admin_access = (
+                "auth:admin" in new_role_obj.permissions
+                or f"auth:org:{org_uuid}" in new_role_obj.permissions
+            )
+            if not has_admin_access:
+                raise ValueError(
+                    "Cannot change your own role to one without admin permissions"
+                )
+
+    await db.instance.update_user_role_in_organization(user_uuid, new_role)
+    return {"status": "ok"}
+
+
+@app.post("/orgs/{org_uuid}/users/{user_uuid}/create-link")
+async def admin_create_user_registration_link(
+    org_uuid: UUID,
+    user_uuid: UUID,
+    request: Request,
+    auth=AUTH_COOKIE,
+):
+    try:
+        user_org, _role_name = await db.instance.get_user_organization(user_uuid)
+    except ValueError:
+        raise HTTPException(status_code=404, detail="User not found")
+    if user_org.uuid != org_uuid:
+        raise HTTPException(status_code=404, detail="User not found in organization")
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+        max_age="5m",
+    )
+    if (  # pragma: no cover - defense in depth, authz.verify already checked
+        "auth:admin" not in ctx.role.permissions
+        and f"auth:org:{org_uuid}" not in ctx.role.permissions
+    ):
+        raise authz.AuthException(
+            status_code=403, detail="Insufficient permissions", mode="forbidden"
+        )
+
+    # Check if user has existing credentials
+    credentials = await db.instance.get_credentials_by_user_uuid(user_uuid)
+    token_type = "user registration" if not credentials else "account recovery"
+
+    token = passphrase.generate()
+    expiry = reset_expires()
+    await db.instance.create_reset_token(
+        user_uuid=user_uuid,
+        key=tokens.reset_key(token),
+        expiry=expiry,
+        token_type=token_type,
+    )
+    url = hostutil.reset_link_url(token)
+    return {
+        "url": url,
+        "expires": (
+            expiry.astimezone(timezone.utc).isoformat().replace("+00:00", "Z")
+            if expiry.tzinfo
+            else expiry.replace(tzinfo=timezone.utc).isoformat().replace("+00:00", "Z")
+        ),
+    }
+
+
+@app.get("/orgs/{org_uuid}/users/{user_uuid}")
+async def admin_get_user_detail(
+    org_uuid: UUID,
+    user_uuid: UUID,
+    request: Request,
+    auth=AUTH_COOKIE,
+):
+    try:
+        user_org, role_name = await db.instance.get_user_organization(user_uuid)
+    except ValueError:
+        raise HTTPException(status_code=404, detail="User not found")
+    if user_org.uuid != org_uuid:
+        raise HTTPException(status_code=404, detail="User not found in organization")
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+    )
+    if (  # pragma: no cover - defense in depth, authz.verify already checked
+        "auth:admin" not in ctx.role.permissions
+        and f"auth:org:{org_uuid}" not in ctx.role.permissions
+    ):
+        raise authz.AuthException(
+            status_code=403, detail="Insufficient permissions", mode="forbidden"
+        )
+    user = await db.instance.get_user_by_uuid(user_uuid)
+    cred_ids = await db.instance.get_credentials_by_user_uuid(user_uuid)
+    creds: list[dict] = []
+    aaguids: set[str] = set()
+    for cid in cred_ids:
+        try:
+            c = await db.instance.get_credential_by_id(cid)
+        except ValueError:  # pragma: no cover - race condition handling
+            continue
+        aaguid_str = str(c.aaguid)
+        aaguids.add(aaguid_str)
+        creds.append(
+            {
+                "credential_uuid": str(c.uuid),
+                "aaguid": aaguid_str,
+                "created_at": (
+                    c.created_at.astimezone(timezone.utc)
+                    .isoformat()
+                    .replace("+00:00", "Z")
+                    if c.created_at.tzinfo
+                    else c.created_at.replace(tzinfo=timezone.utc)
+                    .isoformat()
+                    .replace("+00:00", "Z")
+                ),
+                "last_used": (
+                    c.last_used.astimezone(timezone.utc)
+                    .isoformat()
+                    .replace("+00:00", "Z")
+                    if c.last_used and c.last_used.tzinfo
+                    else (
+                        c.last_used.replace(tzinfo=timezone.utc)
+                        .isoformat()
+                        .replace("+00:00", "Z")
+                        if c.last_used
+                        else None
+                    )
+                ),
+                "last_verified": (
+                    c.last_verified.astimezone(timezone.utc)
+                    .isoformat()
+                    .replace("+00:00", "Z")
+                    if c.last_verified and c.last_verified.tzinfo
+                    else (
+                        c.last_verified.replace(tzinfo=timezone.utc)
+                        .isoformat()
+                        .replace("+00:00", "Z")
+                        if c.last_verified
+                        else None
+                    )
+                )
+                if c.last_verified
+                else None,
+                "sign_count": c.sign_count,
+            }
+        )
+    from .. import aaguid as aaguid_mod
+
+    aaguid_info = aaguid_mod.filter(aaguids)
+
+    # Get sessions for the user
+    normalized_request_host = hostutil.normalize_host(request.headers.get("host"))
+    session_records = await db.instance.list_sessions_for_user(user_uuid)
+    current_session_key = session_key(auth)
+    sessions_payload: list[dict] = []
+    for entry in session_records:
+        sessions_payload.append(
+            {
+                "id": encode_session_key(entry.key),
+                "credential_uuid": str(entry.credential_uuid),
+                "host": entry.host,
+                "ip": entry.ip,
+                "user_agent": useragent.compact_user_agent(entry.user_agent),
+                "last_renewed": (
+                    entry.renewed.astimezone(timezone.utc)
+                    .isoformat()
+                    .replace("+00:00", "Z")
+                    if entry.renewed.tzinfo
+                    else entry.renewed.replace(tzinfo=timezone.utc)
+                    .isoformat()
+                    .replace("+00:00", "Z")
+                ),
+                "is_current": entry.key == current_session_key,
+                "is_current_host": bool(
+                    normalized_request_host
+                    and entry.host
+                    and entry.host == normalized_request_host
+                ),
+            }
+        )
+
+    return {
+        "display_name": user.display_name,
+        "org": {"display_name": user_org.display_name},
+        "role": role_name,
+        "visits": user.visits,
+        "created_at": (
+            user.created_at.astimezone(timezone.utc).isoformat().replace("+00:00", "Z")
+            if user.created_at and user.created_at.tzinfo
+            else (
+                user.created_at.replace(tzinfo=timezone.utc)
+                .isoformat()
+                .replace("+00:00", "Z")
+                if user.created_at
+                else None
+            )
+        ),
+        "last_seen": (
+            user.last_seen.astimezone(timezone.utc).isoformat().replace("+00:00", "Z")
+            if user.last_seen and user.last_seen.tzinfo
+            else (
+                user.last_seen.replace(tzinfo=timezone.utc)
+                .isoformat()
+                .replace("+00:00", "Z")
+                if user.last_seen
+                else None
+            )
+        ),
+        "credentials": creds,
+        "aaguid_info": aaguid_info,
+        "sessions": sessions_payload,
+    }
+
+
+@app.put("/orgs/{org_uuid}/users/{user_uuid}/display-name")
+async def admin_update_user_display_name(
+    org_uuid: UUID,
+    user_uuid: UUID,
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
+):
+    try:
+        user_org, _role_name = await db.instance.get_user_organization(user_uuid)
+    except ValueError:
+        raise HTTPException(status_code=404, detail="User not found")
+    if user_org.uuid != org_uuid:
+        raise HTTPException(status_code=404, detail="User not found in organization")
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+    )
+    if (  # pragma: no cover - defense in depth, authz.verify already checked
+        "auth:admin" not in ctx.role.permissions
+        and f"auth:org:{org_uuid}" not in ctx.role.permissions
+    ):
+        raise authz.AuthException(
+            status_code=403, detail="Insufficient permissions", mode="forbidden"
+        )
+    new_name = (payload.get("display_name") or "").strip()
+    if not new_name:
+        raise HTTPException(status_code=400, detail="display_name required")
+    if len(new_name) > 64:
+        raise HTTPException(status_code=400, detail="display_name too long")
+    await db.instance.update_user_display_name(user_uuid, new_name)
+    return {"status": "ok"}
+
+
+@app.delete("/orgs/{org_uuid}/users/{user_uuid}/credentials/{credential_uuid}")
+async def admin_delete_user_credential(
+    org_uuid: UUID,
+    user_uuid: UUID,
+    credential_uuid: UUID,
+    request: Request,
+    auth=AUTH_COOKIE,
+):
+    try:
+        user_org, _role_name = await db.instance.get_user_organization(user_uuid)
+    except ValueError:
+        raise HTTPException(status_code=404, detail="User not found")
+    if user_org.uuid != org_uuid:
+        raise HTTPException(status_code=404, detail="User not found in organization")
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+        max_age="5m",
+    )
+    if (  # pragma: no cover - defense in depth, authz.verify already checked
+        "auth:admin" not in ctx.role.permissions
+        and f"auth:org:{org_uuid}" not in ctx.role.permissions
+    ):
+        raise authz.AuthException(
+            status_code=403, detail="Insufficient permissions", mode="forbidden"
+        )
+    await db.instance.delete_credential(credential_uuid, user_uuid)
+    return {"status": "ok"}
+
+
+@app.delete("/orgs/{org_uuid}/users/{user_uuid}/sessions/{session_id}")
+async def admin_delete_user_session(
+    org_uuid: UUID,
+    user_uuid: UUID,
+    session_id: str,
+    request: Request,
+    auth=AUTH_COOKIE,
+):
+    try:
+        user_org, _role_name = await db.instance.get_user_organization(user_uuid)
+    except ValueError:
+        raise HTTPException(status_code=404, detail="User not found")
+    if user_org.uuid != org_uuid:
+        raise HTTPException(status_code=404, detail="User not found in organization")
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+    )
+    if (  # pragma: no cover - defense in depth, authz.verify already checked
+        "auth:admin" not in ctx.role.permissions
+        and f"auth:org:{org_uuid}" not in ctx.role.permissions
+    ):
+        raise authz.AuthException(
+            status_code=403, detail="Insufficient permissions", mode="forbidden"
+        )
+
+    try:
+        target_key = tokens.decode_session_key(session_id)
+    except ValueError as exc:
+        raise HTTPException(
+            status_code=400, detail="Invalid session identifier"
+        ) from exc
+
+    target_session = await db.instance.get_session(target_key)
+    if not target_session or target_session.user_uuid != user_uuid:
+        raise HTTPException(status_code=404, detail="Session not found")
+
+    await db.instance.delete_session(target_key)
+
+    # Check if admin terminated their own session
+    current_terminated = target_key == session_key(auth)
+    return {"status": "ok", "current_session_terminated": current_terminated}
+
+
+# -------------------- Permissions (global) --------------------
+
+
+@app.get("/permissions")
+async def admin_list_permissions(request: Request, auth=AUTH_COOKIE):
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", "auth:org:*"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+    )
+    perms = await db.instance.list_permissions()
+
+    # Global admins see all permissions
+    if "auth:admin" in ctx.role.permissions:
+        return [{"id": p.id, "display_name": p.display_name} for p in perms]
+
+    # Org admins only see permissions their org can grant
+    grantable = set(ctx.org.permissions or [])
+    filtered_perms = [p for p in perms if p.id in grantable]
+    return [{"id": p.id, "display_name": p.display_name} for p in filtered_perms]
+
+
+@app.post("/permissions")
+async def admin_create_permission(
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
+):
+    await authz.verify(
+        auth,
+        ["auth:admin"],
+        host=request.headers.get("host"),
+        match=permutil.has_all,
+        max_age="5m",
+    )
+    from ..db import Permission as PermDC
+
+    perm_id = payload.get("id")
+    display_name = payload.get("display_name")
+    if not perm_id or not display_name:
+        raise ValueError("id and display_name are required")
+    querysafe.assert_safe(perm_id, field="id")
+    await db.instance.create_permission(PermDC(id=perm_id, display_name=display_name))
+    return {"status": "ok"}
+
+
+@app.put("/permission")
+async def admin_update_permission(
+    permission_id: str,
+    display_name: str,
+    request: Request,
+    auth=AUTH_COOKIE,
+):
+    await authz.verify(
+        auth, ["auth:admin"], host=request.headers.get("host"), match=permutil.has_all
+    )
+    from ..db import Permission as PermDC
+
+    if not display_name:
+        raise ValueError("display_name is required")
+    querysafe.assert_safe(permission_id, field="permission_id")
+    await db.instance.update_permission(
+        PermDC(id=permission_id, display_name=display_name)
+    )
+    return {"status": "ok"}
+
+
+@app.post("/permission/rename")
+async def admin_rename_permission(
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
+):
+    await authz.verify(
+        auth, ["auth:admin"], host=request.headers.get("host"), match=permutil.has_all
+    )
+    old_id = payload.get("old_id")
+    new_id = payload.get("new_id")
+    display_name = payload.get("display_name")
+    if not old_id or not new_id:
+        raise ValueError("old_id and new_id required")
+
+    # Sanity check: prevent renaming critical permissions
+    if old_id == "auth:admin":
+        raise ValueError("Cannot rename the master admin permission")
+
+    querysafe.assert_safe(old_id, field="old_id")
+    querysafe.assert_safe(new_id, field="new_id")
+    if display_name is None:
+        perm = await db.instance.get_permission(old_id)
+        display_name = perm.display_name
+    rename_fn = getattr(db.instance, "rename_permission", None)
+    if not rename_fn:  # pragma: no cover - all current backends support rename
+        raise ValueError("Permission renaming not supported by this backend")
+    await rename_fn(old_id, new_id, display_name)
+    return {"status": "ok"}
+
+
+@app.delete("/permission")
+async def admin_delete_permission(
+    permission_id: str,
+    request: Request,
+    auth=AUTH_COOKIE,
+):
+    await authz.verify(
+        auth,
+        ["auth:admin"],
+        host=request.headers.get("host"),
+        match=permutil.has_all,
+        max_age="5m",
+    )
+    querysafe.assert_safe(permission_id, field="permission_id")
+
+    # Sanity check: prevent deleting critical permissions
+    if permission_id == "auth:admin":
+        raise ValueError("Cannot delete the master admin permission")
+
+    await db.instance.delete_permission(permission_id)
+    return {"status": "ok"}

paskia/fastapi/api.py

@@ -0,0 +1,308 @@
+import logging
+from contextlib import suppress
+from datetime import datetime, timedelta, timezone
+
+from fastapi import (
+    Depends,
+    FastAPI,
+    HTTPException,
+    Query,
+    Request,
+    Response,
+)
+from fastapi.responses import JSONResponse
+from fastapi.security import HTTPBearer
+
+from paskia.authsession import (
+    EXPIRES,
+    get_reset,
+    get_session,
+    refresh_session_token,
+    session_expiry,
+)
+from paskia.fastapi import authz, session, user
+from paskia.fastapi.session import AUTH_COOKIE, AUTH_COOKIE_NAME
+from paskia.globals import db
+from paskia.globals import passkey as global_passkey
+from paskia.util import frontend, hostutil, htmlutil, passphrase, userinfo
+from paskia.util.tokens import session_key
+
+bearer_auth = HTTPBearer(auto_error=True)
+
+app = FastAPI()
+
+app.mount("/user", user.app)
+
+
+@app.exception_handler(HTTPException)
+async def http_exception_handler(_request: Request, exc: HTTPException):
+    """Ensure auth cookie is cleared on 401 responses (JSON responses only)."""
+    if exc.status_code == 401:
+        resp = JSONResponse(status_code=exc.status_code, content={"detail": exc.detail})
+        session.clear_session_cookie(resp)
+        return resp
+    return JSONResponse(status_code=exc.status_code, content={"detail": exc.detail})
+
+
+# Refresh only if at least this much of the session lifetime has been *consumed*.
+# Consumption is derived from (now + EXPIRES) - current_expires.
+# This guarantees a minimum spacing between DB writes even with frequent /validate calls.
+_REFRESH_INTERVAL = timedelta(minutes=5)
+
+
+@app.exception_handler(ValueError)
+async def value_error_handler(_request: Request, exc: ValueError):
+    return JSONResponse(status_code=400, content={"detail": str(exc)})
+
+
+@app.exception_handler(authz.AuthException)
+async def auth_exception_handler(_request: Request, exc: authz.AuthException):
+    """Handle AuthException with auth info for UI."""
+    return JSONResponse(
+        status_code=exc.status_code,
+        content=await authz.auth_error_content(exc),
+    )
+
+
+@app.exception_handler(Exception)
+async def general_exception_handler(
+    _request: Request, exc: Exception
+):  # pragma: no cover
+    logging.exception("Unhandled exception in API app")
+    return JSONResponse(status_code=500, content={"detail": "Internal server error"})
+
+
+@app.post("/validate")
+async def validate_token(
+    request: Request,
+    response: Response,
+    perm: list[str] = Query([]),
+    auth=AUTH_COOKIE,
+):
+    """Validate the current session and extend its expiry.
+
+    Always refreshes the session (sliding expiration) and re-sets the cookie with a
+    renewed max-age. This keeps active users logged in without needing a separate
+    refresh endpoint.
+    """
+    try:
+        ctx = await authz.verify(auth, perm, host=request.headers.get("host"))
+    except HTTPException:
+        # Global handler will clear cookie if 401
+        raise
+    renewed = False
+    if auth:
+        current_expiry = session_expiry(ctx.session)
+        consumed = EXPIRES - (current_expiry - datetime.now(timezone.utc))
+        if not timedelta(0) < consumed < _REFRESH_INTERVAL:
+            try:
+                await refresh_session_token(
+                    auth,
+                    ip=request.client.host if request.client else "",
+                    user_agent=request.headers.get("user-agent") or "",
+                )
+                session.set_session_cookie(response, auth)
+                renewed = True
+            except ValueError:
+                # Session disappeared, e.g. due to concurrent logout; global handler will clear
+                raise authz.AuthException(
+                    status_code=401, detail="Session expired", mode="login"
+                )
+    return {
+        "valid": True,
+        "user_uuid": str(ctx.session.user_uuid),
+        "renewed": renewed,
+    }
+
+
+@app.get("/forward")
+async def forward_authentication(
+    request: Request,
+    response: Response,
+    perm: list[str] = Query([]),
+    max_age: str | None = Query(None),
+    auth=AUTH_COOKIE,
+):
+    """Forward auth validation for Caddy/Nginx.
+
+    Query Params:
+    - perm: repeated permission IDs the authenticated user must possess (ALL required).
+    - max_age: maximum age of authentication (e.g., "5m", "1h", "30s"). If the session
+               is older than this, user must re-authenticate.
+
+    Success: 204 No Content with Remote-* headers describing the authenticated user.
+    Failure (unauthenticated / unauthorized): 4xx response.
+        - If Accept header contains "text/html": HTML page for authentication
+          with data attributes for mode and other metadata.
+        - Otherwise: JSON response with error details and an `iframe` field
+          pointing to /auth/restricted/?mode=... for iframe-based authentication.
+    """
+    try:
+        ctx = await authz.verify(
+            auth, perm, host=request.headers.get("host"), max_age=max_age
+        )
+        role_permissions = set(ctx.role.permissions or [])
+        if ctx.permissions:
+            role_permissions.update(permission.id for permission in ctx.permissions)
+
+        remote_headers: dict[str, str] = {
+            "Remote-User": str(ctx.user.uuid),
+            "Remote-Name": ctx.user.display_name,
+            "Remote-Groups": ",".join(sorted(role_permissions)),
+            "Remote-Org": str(ctx.org.uuid),
+            "Remote-Org-Name": ctx.org.display_name,
+            "Remote-Role": str(ctx.role.uuid),
+            "Remote-Role-Name": ctx.role.display_name,
+            "Remote-Session-Expires": (
+                session_expiry(ctx.session)
+                .astimezone(timezone.utc)
+                .isoformat()
+                .replace("+00:00", "Z")
+                if session_expiry(ctx.session).tzinfo
+                else session_expiry(ctx.session)
+                .replace(tzinfo=timezone.utc)
+                .isoformat()
+                .replace("+00:00", "Z")
+            ),
+            "Remote-Credential": str(ctx.session.credential_uuid),
+        }
+        return Response(status_code=204, headers=remote_headers)
+    except authz.AuthException as e:
+        # Clear cookie only if session is invalid (not for reauth)
+        if e.clear_session:
+            session.clear_session_cookie(response)
+
+        # Check Accept header to decide response format
+        accept = request.headers.get("accept", "")
+        wants_html = "text/html" in accept
+
+        if wants_html:
+            # Browser request - return full-page HTML with metadata
+            data_attrs = {"mode": e.mode, **e.metadata}
+            html = (await frontend.read("/int/forward/index.html"))[0]
+            html = htmlutil.patch_html_data_attrs(html, **data_attrs)
+            return Response(
+                html, status_code=e.status_code, media_type="text/html; charset=UTF-8"
+            )
+        else:
+            # API request - return JSON with iframe srcdoc HTML
+            return JSONResponse(
+                status_code=e.status_code,
+                content=await authz.auth_error_content(e),
+            )
+
+
+@app.get("/settings")
+async def get_settings():
+    pk = global_passkey.instance
+    base_path = hostutil.ui_base_path()
+    return {
+        "rp_id": pk.rp_id,
+        "rp_name": pk.rp_name,
+        "ui_base_path": base_path,
+        "auth_host": hostutil.dedicated_auth_host(),
+        "auth_site_url": hostutil.auth_site_url(),
+        "session_cookie": AUTH_COOKIE_NAME,
+    }
+
+
+@app.get("/token-info")
+async def api_token_info(token: str):
+    """Get information about a reset token.
+
+    Returns:
+        - type: "reset"
+        - user_name: display name of the user
+        - token_type: type of reset token
+    """
+    if not passphrase.is_well_formed(token):
+        raise HTTPException(status_code=404, detail="Invalid token")
+
+    # Check if this is a reset token
+    try:
+        reset_token = await get_reset(token)
+        user = await db.instance.get_user_by_uuid(reset_token.user_uuid)
+        return {
+            "type": "reset",
+            "user_name": user.display_name,
+            "token_type": reset_token.token_type,
+        }
+    except (ValueError, Exception):
+        raise HTTPException(status_code=404, detail="Token not found or expired")
+
+
+@app.post("/user-info")
+async def api_user_info(
+    request: Request,
+    response: Response,
+    reset: str | None = None,
+    auth=AUTH_COOKIE,
+):
+    """Get user information including credentials, sessions, and permissions.
+
+    Can be called with either:
+    - A session cookie (auth) for authenticated users
+    - A reset token for users in password reset flow
+    """
+    authenticated = False
+    session_record = None
+    reset_token = None
+    try:
+        if reset:
+            if not passphrase.is_well_formed(reset):
+                raise ValueError("Invalid reset token")
+            reset_token = await get_reset(reset)
+            target_user_uuid = reset_token.user_uuid
+        else:
+            if auth is None:
+                raise authz.AuthException(
+                    status_code=401,
+                    detail="Authentication required",
+                    mode="login",
+                )
+            session_record = await get_session(auth, host=request.headers.get("host"))
+            authenticated = True
+            target_user_uuid = session_record.user_uuid
+    except ValueError as e:
+        raise HTTPException(401, str(e))
+
+    # Return minimal response for reset tokens
+    if not authenticated and reset_token:
+        return await userinfo.format_reset_user_info(target_user_uuid, reset_token)
+
+    # Return full user info for authenticated users
+    assert auth is not None
+    assert session_record is not None
+
+    return await userinfo.format_user_info(
+        user_uuid=target_user_uuid,
+        auth=auth,
+        session_record=session_record,
+        request_host=request.headers.get("host"),
+    )
+
+
+@app.post("/logout")
+async def api_logout(request: Request, response: Response, auth=AUTH_COOKIE):
+    if not auth:
+        return {"message": "Already logged out"}
+    try:
+        await get_session(auth, host=request.headers.get("host"))
+    except ValueError:
+        return {"message": "Already logged out"}
+    with suppress(Exception):
+        await db.instance.delete_session(session_key(auth))
+    session.clear_session_cookie(response)
+    return {"message": "Logged out successfully"}
+
+
+@app.post("/set-session")
+async def api_set_session(
+    request: Request, response: Response, auth=Depends(bearer_auth)
+):
+    user = await get_session(auth.credentials, host=request.headers.get("host"))
+    session.set_session_cookie(response, auth.credentials)
+    return {
+        "message": "Session cookie set successfully",
+        "user_uuid": str(user.user_uuid),
+    }

paskia/fastapi/auth_host.py

@@ -0,0 +1,97 @@
+"""Middleware for handling auth host redirects."""
+
+from fastapi import Request, Response
+from fastapi.responses import RedirectResponse
+
+from paskia.util import hostutil, passphrase
+
+
+def is_ui_path(path: str) -> bool:
+    """Check if the path is a UI endpoint."""
+    ui_paths = {
+        "/",
+        "/admin",
+        "/admin/",
+        "/auth",
+        "/auth/",
+        "/auth/admin",
+        "/auth/admin/",
+    }
+    if path in ui_paths:
+        return True
+    # Treat reset token pages as UI (dynamic). Accept single-segment tokens.
+    if path.startswith("/auth/"):
+        token = path[6:]
+        if token and "/" not in token and passphrase.is_well_formed(token):
+            return True
+    else:
+        token = path[1:]
+        if token and "/" not in token and passphrase.is_well_formed(token):
+            return True
+    return False
+
+
+def is_restricted_path(path: str) -> bool:
+    """Check if the path is restricted (API/admin endpoints)."""
+    return path.startswith(("/auth/api/admin/", "/auth/api/user/", "/auth/ws/"))
+
+
+def should_redirect_to_auth_host(path: str) -> bool:
+    """Determine if the request should be redirected to the auth host."""
+    if path in {"/", "/auth", "/auth/"}:
+        return False
+    return is_ui_path(path) or is_restricted_path(path)
+
+
+def redirect_to_auth_host(request: Request, cfg: str, path: str) -> Response:
+    """Create a redirect response to the auth host."""
+    if is_restricted_path(path):
+        return Response(status_code=404)
+    new_path = (
+        path[5:] or "/" if is_ui_path(path) and path.startswith("/auth") else path
+    )
+    return RedirectResponse(f"{request.url.scheme}://{cfg}{new_path}", 307)
+
+
+def should_redirect_auth_path_to_root(path: str) -> bool:
+    """Check if /auth/ UI path should be redirected to root on auth host."""
+    if not path.startswith("/auth/"):
+        return False
+    ui_paths = {"/auth", "/auth/", "/auth/admin", "/auth/admin/"}
+    if path in ui_paths:
+        return True
+    # Check for reset token
+    token = path[6:]
+    return bool(token and "/" not in token and passphrase.is_well_formed(token))
+
+
+def redirect_to_root_on_auth_host(request: Request, cur: str, path: str) -> Response:
+    """Create a redirect response to root path on the same host."""
+    new_path = path[5:] or "/"
+    return RedirectResponse(f"{request.url.scheme}://{cur}{new_path}", 307)
+
+
+async def redirect_middleware(request: Request, call_next):
+    """Middleware to handle auth host redirects."""
+    cfg = hostutil.dedicated_auth_host()
+    if not cfg:
+        return await call_next(request)
+
+    cur = hostutil.normalize_host(request.headers.get("host"))
+    if not cur:
+        return await call_next(request)
+
+    cfg_normalized = hostutil.normalize_host(cfg)
+    on_auth_host = cur == cfg_normalized
+
+    path = request.url.path or "/"
+
+    if not on_auth_host:
+        if not should_redirect_to_auth_host(path):
+            return await call_next(request)
+        return redirect_to_auth_host(request, cfg, path)
+    else:
+        # On auth host: force UI endpoints at root
+        if should_redirect_auth_path_to_root(path):
+            return redirect_to_root_on_auth_host(request, cur, path)
+        return await call_next(request)

paskia/fastapi/authz.py

@@ -0,0 +1,110 @@
+import logging
+
+from fastapi import HTTPException
+
+from paskia.util import permutil, sessionutil
+
+logger = logging.getLogger(__name__)
+
+
+class AuthException(HTTPException):
+    """Exception raised during authentication/authorization with metadata for the UI.
+
+    Attributes:
+        status_code: HTTP status code (401 for auth, 403 for authz)
+        detail: Error message
+        mode: UI mode ('login' or 'reauth')
+        clear_session: Whether to clear the session cookie (True for invalid sessions)
+        metadata: Additional data to pass to the frontend
+    """
+
+    def __init__(
+        self,
+        status_code: int,
+        detail: str,
+        mode: str,
+        clear_session: bool = False,
+        **metadata,
+    ):
+        super().__init__(status_code=status_code, detail=detail)
+        self.mode = mode
+        self.clear_session = clear_session
+        self.metadata = metadata
+
+
+async def auth_error_content(exc: AuthException) -> dict:
+    """Generate JSON response content for an AuthException.
+
+    Returns a dict with detail, mode, and iframe URL for src embedding.
+    """
+    # Build hash fragment from mode and metadata
+    params = {"mode": exc.mode, **exc.metadata}
+    fragment = "&".join(f"{k}={v}" for k, v in params.items() if v is not None)
+    iframe_url = f"/auth/restricted/#{fragment}"
+    return {
+        "detail": exc.detail,
+        "auth": {
+            "mode": exc.mode,
+            "iframe": iframe_url,
+            **exc.metadata,
+        },
+    }
+
+
+async def verify(
+    auth: str | None,
+    perm: list[str],
+    match=permutil.has_all,
+    host: str | None = None,
+    max_age: str | None = None,
+):
+    """Validate session token and optional list of required permissions.
+
+    Returns the session context.
+
+    Raises AuthException on failure with metadata for UI rendering.
+    """
+    if not auth:
+        raise AuthException(
+            status_code=401,
+            detail="Authentication required",
+            mode="login",
+        )
+
+    ctx = await permutil.session_context(auth, host)
+    if not ctx:
+        raise AuthException(
+            status_code=401,
+            detail="Your session has expired. Please sign in again.",
+            mode="login",
+            clear_session=True,
+        )
+    # Check max_age requirement if specified
+    if max_age:
+        try:
+            if not sessionutil.check_session_age(ctx, max_age):
+                raise AuthException(
+                    status_code=401,
+                    detail="Additional authentication required",
+                    mode="reauth",
+                )
+        except ValueError as e:
+            # Invalid max_age format - log but don't fail the request
+            logger.warning(f"Invalid max_age format '{max_age}': {e}")
+
+    if not match(ctx, perm):
+        # Determine which permissions are missing for clearer diagnostics
+        missing = sorted(set(perm) - set(ctx.role.permissions))
+        logger.warning(
+            "Permission denied: user=%s role=%s missing=%s required=%s granted=%s",  # noqa: E501
+            getattr(ctx.user, "uuid", "?"),
+            getattr(ctx.role, "display_name", "?"),
+            missing,
+            perm,
+            ctx.role.permissions,
+        )
+        raise AuthException(
+            status_code=403, mode="forbidden", detail="Permission required"
+        )
+
+    return ctx

paskia/fastapi/mainapp.py

@@ -0,0 +1,130 @@
+import logging
+import os
+from contextlib import asynccontextmanager
+from pathlib import Path
+
+from fastapi import FastAPI, HTTPException, Request, Response
+from fastapi.responses import FileResponse, RedirectResponse
+from fastapi.staticfiles import StaticFiles
+
+from paskia.fastapi import admin, api, auth_host, ws
+from paskia.fastapi.session import AUTH_COOKIE
+from paskia.util import frontend, hostutil, passphrase
+
+# Path to examples/index.html when running from source tree
+_EXAMPLES_DIR = Path(__file__).parent.parent.parent / "examples"
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):  # pragma: no cover - startup path
+    """Application lifespan to ensure globals (DB, passkey) are initialized in each process.
+
+    Configuration is passed via PASKIA_CONFIG JSON env variable (set by the CLI entrypoint)
+    so that uvicorn reload / multiprocess workers inherit the settings.
+    All keys are guaranteed to exist; values are already normalized by __main__.py.
+    """
+    import json
+
+    from paskia import globals
+
+    config = json.loads(os.environ["PASKIA_CONFIG"])
+
+    try:
+        # CLI (__main__) performs bootstrap once; here we skip to avoid duplicate work
+        await globals.init(
+            rp_id=config["rp_id"],
+            rp_name=config["rp_name"],
+            origins=config["origins"],
+            bootstrap=False,
+        )
+    except ValueError as e:
+        logging.error(f"⚠️ {e}")
+        # Re-raise to fail fast
+        raise
+
+    # Restore info level logging after startup (suppressed during uvicorn init in dev mode)
+    if frontend.is_dev_mode():
+        logging.getLogger("uvicorn").setLevel(logging.INFO)
+        logging.getLogger("uvicorn.access").setLevel(logging.INFO)
+
+    yield
+
+
+app = FastAPI(lifespan=lifespan)
+
+# Apply redirections to auth-host if configured (deny access to restricted endpoints, remove /auth/)
+app.middleware("http")(auth_host.redirect_middleware)
+
+app.mount("/auth/api/admin/", admin.app)
+app.mount("/auth/api/", api.app)
+app.mount("/auth/ws/", ws.app)
+
+# In dev mode (PASKIA_DEVMODE=1), Vite serves assets directly; skip static files mount
+if not frontend.is_dev_mode():
+    app.mount(
+        "/auth/assets/",
+        StaticFiles(directory=frontend.file("auth", "assets")),
+        name="assets",
+    )
+
+
+@app.get("/auth/restricted/")
+async def restricted_view():
+    """Serve the restricted/authentication UI for iframe embedding."""
+    return Response(*await frontend.read("/auth/restricted/index.html"))
+
+
+# Navigable URLs are defined here. We support both / and /auth/ as the base path
+# / is used on a dedicated auth site, /auth/ on app domains with auth
+
+
+@app.get("/")
+@app.get("/auth/")
+async def frontapp(request: Request, response: Response, auth=AUTH_COOKIE):
+    """Serve the user profile app.
+
+    The frontend handles mode detection (host mode vs full profile) based on settings.
+    Access control is handled via APIs.
+    """
+    return Response(*await frontend.read("/auth/index.html"))
+
+
+@app.get("/admin", include_in_schema=False)
+@app.get("/auth/admin", include_in_schema=False)
+async def admin_root_redirect():
+    return RedirectResponse(f"{hostutil.ui_base_path()}admin/", status_code=307)
+
+
+@app.get("/admin/", include_in_schema=False)
+async def admin_root(request: Request, auth=AUTH_COOKIE):
+    return await admin.adminapp(request, auth)  # Delegated to admin app
+
+
+@app.get("/auth/examples/", include_in_schema=False)
+async def examples_page():
+    """Serve examples/index.html when running from source tree.
+
+    This provides a simple test page for API mode authentication flows
+    without depending on the Vue frontend build.
+    """
+    index_file = _EXAMPLES_DIR / "index.html"
+    if not index_file.is_file():
+        raise HTTPException(
+            status_code=404,
+            detail="Examples not available (not running from source tree)",
+        )
+    return FileResponse(index_file, media_type="text/html")
+
+
+# Note: this catch-all handler must be the last route defined
+@app.get("/{token}")
+@app.get("/auth/{token}")
+async def token_link(token: str):
+    """Serve the reset app for reset tokens (password reset / device addition).
+
+    The frontend will validate the token via /auth/api/token-info.
+    """
+    if not passphrase.is_well_formed(token):
+        raise HTTPException(status_code=404)
+
+    return Response(*await frontend.read("/int/reset/index.html"))

paskia/fastapi/remote.py

@@ -0,0 +1,504 @@
+"""
+Remote authentication WebSocket endpoints.
+
+This module handles cross-device authentication where one device (requesting)
+wants to log in and another device (authenticating) provides the passkey.
+
+Endpoints:
+- /request: Called by the device wanting to be authenticated
+- /pair: Called by the authenticating device to complete the request
+"""
+
+import asyncio
+from uuid import UUID
+
+import base64url
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect
+
+from paskia import remoteauth
+from paskia.authsession import create_session
+from paskia.fastapi.session import infodict
+from paskia.fastapi.wsutil import validate_origin, websocket_error_handler
+from paskia.globals import db, passkey
+from paskia.util import passphrase, pow
+
+# Create a FastAPI subapp for remote auth WebSocket endpoints
+app = FastAPI()
+
+
+@app.websocket("/request")
+@websocket_error_handler
+async def websocket_remote_auth_request(ws: WebSocket):
+    """Request authentication from another device.
+
+    This endpoint is called by the device that wants to be authenticated.
+    It creates a remote auth request and waits for another device to authenticate.
+
+    Flow:
+    1. Client connects
+    2. Server sends HARD PoW challenge, client solves and responds
+    3. Server creates a 3-word pairing code and sends it with expiry
+    4. Server waits for another device to authenticate via /remote-auth/permit
+    5. When auth completes, server sends session_token to this client
+    6. Client can then use the session token to set a cookie
+    7. Connection times out after 5 minutes with explicit timeout message
+    """
+    origin = validate_origin(ws)
+    host = origin.split("://", 1)[1]
+
+    if remoteauth.instance is None:
+        raise ValueError("Remote authentication is not available")
+
+    # Track this WebSocket connection for load-based PoW difficulty
+    remoteauth.instance.increment_connections()
+    try:
+        # Send PoW challenge immediately with dynamic difficulty based on load
+        challenge = pow.generate_challenge()
+        work = remoteauth.instance.get_pow_difficulty()
+
+        await ws.send_json(
+            {
+                "pow": {
+                    "challenge": base64url.enc(challenge),
+                    "work": work,
+                }
+            }
+        )
+
+        # Receive client response with PoW solution and action
+        response = await ws.receive_json()
+
+        # Verify PoW (required for this endpoint - SECURITY)
+        solution_b64 = response.get("pow")
+        if not solution_b64:
+            raise ValueError("PoW solution required")
+
+        try:
+            solution = base64url.dec(solution_b64)
+        except Exception:
+            raise ValueError("Invalid PoW solution encoding")
+
+        pow.verify_pow(challenge, solution, work)
+
+        # Extract action from the same message
+        action = response.get("action", "login")
+        if action not in ("login", "register"):
+            action = "login"
+
+        metadata = infodict(ws, "remote-auth-request")
+
+        # Create the remote auth request
+        pairing_code, expiry = await remoteauth.instance.create_request(
+            host=host,
+            ip=metadata.get("ip") or "",
+            user_agent=metadata.get("user_agent") or "",
+            action=action,
+        )
+
+        # Send the pairing code to the client
+        await ws.send_json(
+            {
+                "pairing_code": pairing_code,
+                "expires": expiry.isoformat().replace("+00:00", "Z"),
+            }
+        )
+
+        # Set up async notification for completion
+        result_event = asyncio.Event()
+        result_data: dict = {}
+
+        def on_complete(
+            session_token: str | None,
+            user_uuid: UUID | None,
+            credential_uuid: UUID | None,
+            reset_token: str | None,
+        ):
+            # Check if this was an explicit denial (UUID(int=0) is the signal)
+            was_denied = user_uuid is not None and user_uuid == UUID(int=0)
+            result_data["session_token"] = session_token
+            result_data["user_uuid"] = user_uuid
+            result_data["credential_uuid"] = credential_uuid
+            result_data["reset_token"] = reset_token
+            result_data["was_denied"] = was_denied
+            result_event.set()
+
+        await remoteauth.instance.set_notify_callback(pairing_code, on_complete)
+
+        # Set up async notification for action lock
+        locked_event = asyncio.Event()
+        locked_data: dict = {}
+
+        def on_action_locked(action: str):
+            locked_data["action"] = action
+            locked_event.set()
+
+        await remoteauth.instance.set_action_locked_callback(
+            pairing_code, on_action_locked
+        )
+
+        # 5 minute timeout for the entire remote auth flow
+        timeout_seconds = 5 * 60
+
+        try:
+            # Wait for either:
+            # 1. Authentication to complete (result_event set)
+            # 2. Action locked (locked_event set)
+            # 3. Client to disconnect
+            # 4. Client to send a cancel or update_action message
+            # 5. Timeout after 5 minutes
+
+            async with asyncio.timeout(timeout_seconds):
+                while True:
+                    # Use asyncio.wait to handle events and websocket
+                    receive_task = asyncio.create_task(ws.receive_json())
+                    result_wait_task = asyncio.create_task(result_event.wait())
+                    locked_wait_task = asyncio.create_task(locked_event.wait())
+
+                    tasks = [receive_task, result_wait_task]
+                    # Only wait for locked event if not already locked
+                    if not locked_event.is_set():
+                        tasks.append(locked_wait_task)
+
+                    done, pending = await asyncio.wait(
+                        tasks,
+                        return_when=asyncio.FIRST_COMPLETED,
+                    )
+
+                    # Cancel pending tasks
+                    for task in pending:
+                        task.cancel()
+                        try:
+                            await task
+                        except asyncio.CancelledError:
+                            pass
+
+                    if result_wait_task in done:
+                        # Authentication completed (or expired/cancelled/denied)
+                        was_denied = result_data.get("was_denied", False)
+                        if result_data.get("session_token") or result_data.get(
+                            "reset_token"
+                        ):
+                            response = {
+                                "status": "authenticated",
+                                "user_uuid": str(result_data["user_uuid"]),
+                            }
+                            if result_data.get("session_token"):
+                                response["session_token"] = result_data["session_token"]
+                            if result_data.get("reset_token"):
+                                response["reset_token"] = result_data["reset_token"]
+                            await ws.send_json(response)
+                        else:
+                            # Check if it was explicitly denied
+                            if was_denied:
+                                await ws.send_json(
+                                    {
+                                        "status": "denied",
+                                        "detail": "Access denied",
+                                    }
+                                )
+                            else:
+                                await ws.send_json(
+                                    {
+                                        "status": "expired",
+                                        "detail": "Remote authentication request expired or was cancelled",
+                                    }
+                                )
+                        return
+
+                    if locked_wait_task in done:
+                        # Action was locked by the authenticating device
+                        await ws.send_json(
+                            {
+                                "status": "locked",
+                                "action": locked_data.get("action", "login"),
+                            }
+                        )
+                        # Continue waiting for result
+
+                    if receive_task in done:
+                        # Client sent a message
+                        msg = receive_task.result()
+                        if msg.get("action") == "cancel":
+                            await remoteauth.instance.cancel_request(pairing_code)
+                            await ws.send_json({"status": "cancelled"})
+                            return
+                        elif msg.get("action") == "update_action":
+                            # Update the action (login/register) if not locked
+                            new_action = "register" if msg.get("register") else "login"
+                            await remoteauth.instance.update_action(
+                                pairing_code, new_action
+                            )
+                        # Ignore other messages
+
+        except TimeoutError:
+            # 5 minute timeout reached
+            await remoteauth.instance.cancel_request(pairing_code)
+            await ws.send_json(
+                {
+                    "status": "timeout",
+                    "detail": "Remote authentication request timed out after 5 minutes",
+                }
+            )
+        except WebSocketDisconnect:
+            # Client disconnected, cancel the request and mark as denied
+            await remoteauth.instance.cancel_request(pairing_code, denied=True)
+        except Exception:
+            await remoteauth.instance.cancel_request(pairing_code)
+            raise
+    finally:
+        # Decrement connection count
+        remoteauth.instance.decrement_connections()
+
+
+@app.websocket("/permit")
+@websocket_error_handler
+async def websocket_remote_auth_permit(ws: WebSocket):
+    """Complete a remote authentication request using a 3-word pairing code.
+
+    This endpoint is called from the user's profile on the authenticating device.
+    The user enters the pairing code displayed on the requesting device.
+
+    Protocol:
+    1. Server sends PoW challenge immediately on connect
+    2. Client sends {code: "word.word.word", pow: "<base64>"} for 3-word pairing code
+    3. Server validates PoW and code:
+       - If invalid code/PoW: {status: 4xx, detail: "...", pow: {challenge, work}}
+       - If valid: {status: "found", host: "...", user_agent_pretty: "...", pow: {challenge, work}}
+    4. Client can then send {authenticate: true} to start WebAuthn
+    5. Server sends {optionsJSON: ...}
+    6. Client sends WebAuthn response
+    7. Server sends {status: "success", message: "..."}
+    """
+    from paskia.util import useragent
+
+    origin = validate_origin(ws)
+
+    if remoteauth.instance is None:
+        raise ValueError("Remote authentication is not available")
+
+    # Generate initial PoW challenge (always NORMAL for authenticated users)
+    challenge = pow.generate_challenge()
+    work = pow.NORMAL
+
+    await ws.send_json(
+        {
+            "pow": {
+                "challenge": base64url.enc(challenge),
+                "work": work,
+            }
+        }
+    )
+
+    request = None
+    webauthn_challenge = None
+    explicitly_denied = False
+
+    try:
+        while True:
+            msg = await ws.receive_json()
+
+            # Handle deny request first (no PoW needed - already validated during lookup)
+            if msg.get("deny") and request is not None:
+                # Cancel the request and mark it as denied
+                explicitly_denied = True
+                await remoteauth.instance.cancel_request(request.key, denied=True)
+                await ws.send_json(
+                    {
+                        "status": "denied",
+                        "message": "Request denied",
+                    }
+                )
+                break
+
+            # Handle authenticate request (no PoW needed - already validated during lookup)
+            if msg.get("authenticate") and request is not None:
+                # Generate authentication options
+                options, webauthn_challenge = passkey.instance.auth_generate_options(
+                    credential_ids=None
+                )
+                await ws.send_json({"optionsJSON": options})
+
+                # Wait for WebAuthn response
+                credential = passkey.instance.auth_parse(await ws.receive_json())
+
+                # Fetch and verify credential
+                try:
+                    stored_cred = await db.instance.get_credential_by_id(
+                        credential.raw_id
+                    )
+                except ValueError:
+                    raise ValueError(
+                        f"This passkey is no longer registered with {passkey.instance.rp_name}"
+                    )
+
+                # Verify the credential
+                passkey.instance.auth_verify(
+                    credential, webauthn_challenge, stored_cred, origin
+                )
+
+                # Update credential last_used
+                await db.instance.login(stored_cred.user_uuid, stored_cred)
+
+                # Create a session for the REQUESTING device
+                assert stored_cred.uuid is not None
+
+                session_token = None
+                reset_token = None
+
+                if request.action == "register":
+                    # For registration, create a reset token for device addition
+                    from paskia.authsession import expires
+                    from paskia.util import tokens
+
+                    token_str = passphrase.generate()
+                    expiry = expires()
+                    await db.instance.create_reset_token(
+                        user_uuid=stored_cred.user_uuid,
+                        key=tokens.reset_key(token_str),
+                        expiry=expiry,
+                        token_type="device addition",
+                    )
+                    reset_token = token_str
+                    # Also create a session so the device is logged in?
+                    # User requested: "We can make the flow always create a new session, but make additional tokens for other possibilities."
+                    session_token = await create_session(
+                        user_uuid=stored_cred.user_uuid,
+                        credential_uuid=stored_cred.uuid,
+                        host=request.host,
+                        ip=request.ip,
+                        user_agent=request.user_agent,
+                    )
+                else:
+                    # Default login action
+                    session_token = await create_session(
+                        user_uuid=stored_cred.user_uuid,
+                        credential_uuid=stored_cred.uuid,
+                        host=request.host,
+                        ip=request.ip,
+                        user_agent=request.user_agent,
+                    )
+
+                # Complete the remote auth request (notifies the waiting device)
+                completed = await remoteauth.instance.complete_request(
+                    token=request.key,
+                    session_token=session_token,
+                    user_uuid=stored_cred.user_uuid,
+                    credential_uuid=stored_cred.uuid,
+                    reset_token=reset_token,
+                )
+
+                if not completed:
+                    raise ValueError("Failed to complete remote authentication")
+
+                msg = "Authentication successful."
+                if request.action == "register":
+                    msg += " The other device can now register a passkey."
+                else:
+                    msg += " The other device is now logged in."
+
+                await ws.send_json(
+                    {
+                        "status": "success",
+                        "message": msg,
+                    }
+                )
+                break
+
+            # Handle code lookup request - requires PoW validation
+            code = msg.get("code", "")
+
+            # Validate PoW for pairing codes
+            solution_b64 = msg.get("pow")
+            if not solution_b64:
+                raise ValueError("PoW solution required")
+
+            try:
+                solution = base64url.dec(solution_b64)
+            except Exception:
+                raise ValueError("Invalid PoW solution encoding")
+
+            try:
+                pow.verify_pow(challenge, solution, work)
+            except ValueError as e:
+                # Invalid PoW - send new challenge
+                challenge = pow.generate_challenge()
+                await ws.send_json(
+                    {
+                        "status": 400,
+                        "detail": str(e),
+                        "pow": {
+                            "challenge": base64url.enc(challenge),
+                            "work": work,
+                        },
+                    }
+                )
+                continue
+
+            if not code:
+                raise ValueError("Pairing code required")
+
+            # Look up the remote auth request by pairing code
+            request = await remoteauth.instance.get_request(code)
+
+            # Generate new challenge for next request (always NORMAL for authenticated users)
+            challenge = pow.generate_challenge()
+
+            if request is None:
+                await ws.send_json(
+                    {
+                        "status": 404,
+                        "detail": "Code not found",
+                        "pow": {
+                            "challenge": base64url.enc(challenge),
+                            "work": work,
+                        },
+                    }
+                )
+                request = None  # Reset for next attempt
+                continue
+
+            # Valid code found - lock the action so it can't be changed anymore
+            # This also notifies the requesting device
+            locked_action = await remoteauth.instance.lock_action(request.key)
+            if locked_action is None:
+                # Already locked by another device
+                await ws.send_json(
+                    {
+                        "status": 409,
+                        "detail": "This request is already being processed in another window",
+                        "pow": {
+                            "challenge": base64url.enc(challenge),
+                            "work": work,
+                        },
+                    }
+                )
+                request = None  # Reset for next attempt
+                continue
+
+            request.action = locked_action  # Update local copy with locked value
+
+            # Send device info to the authenticating device
+            await ws.send_json(
+                {
+                    "status": "found",
+                    "host": request.host,
+                    "user_agent_pretty": useragent.compact_user_agent(
+                        request.user_agent
+                    ),
+                    "client_ip": request.ip,
+                    "action": request.action,
+                    "pow": {
+                        "challenge": base64url.enc(challenge),
+                        "work": work,
+                    },
+                }
+            )
+    except Exception:
+        # If websocket disconnects without explicit denial, unlock the request
+        if request and not explicitly_denied:
+            # Unlock the request so the code can be used again
+            async with remoteauth.instance._lock:
+                req = remoteauth.instance._requests.get(request.key)
+                if req and req.locked:
+                    req.locked = False
+        raise

paskia/fastapi/reset.py

@@ -1,7 +1,7 @@
 """CLI support for creating user credential reset links.
 
 Usage (via main CLI):
-    passkey-auth reset [query]
+    paskia reset [query]
 
 If query is omitted, the master admin (first Administration role user in
 an organization granting auth:admin) is targeted. Otherwise query is
@@ -15,10 +15,10 @@ from __future__ import annotations
 import asyncio
 from uuid import UUID
 
-from passkey import authsession as _authsession
-from passkey import globals as _g
-from passkey.util import passphrase
-from passkey.util import tokens as _tokens
+from paskia import authsession as _authsession
+from paskia import globals as _g
+from paskia.util import hostutil, passphrase
+from paskia.util import tokens as _tokens
 
 
 async def _resolve_targets(query: str | None):
@@ -63,13 +63,14 @@ async def _resolve_targets(query: str | None):
 
 async def _create_reset(user, role_name: str):
     token = passphrase.generate()
-    await _g.db.instance.create_session(
+    expiry = _authsession.reset_expires()
+    await _g.db.instance.create_reset_token(
         user_uuid=user.uuid,
         key=_tokens.reset_key(token),
-        expires=_authsession.expires(),
-        info={"type": "manual reset", "role": role_name},
+        expiry=expiry,
+        token_type="manual reset",
     )
-    return f"{_g.passkey.instance.origin}/auth/{token}", token
+    return hostutil.reset_link_url(token), token
 
 
 async def _main(query: str | None) -> int:

paskia/fastapi/session.py

@@ -8,26 +8,45 @@ This module provides FastAPI-specific session management functionality:
 Generic session management functions have been moved to authsession.py
 """
 
-from fastapi import Request, Response, WebSocket
+from fastapi import Cookie, Request, Response, WebSocket
 
-from ..authsession import EXPIRES
+from paskia.authsession import EXPIRES
+
+AUTH_COOKIE_NAME = "__Host-paskia"
+AUTH_COOKIE = Cookie(None, alias=AUTH_COOKIE_NAME)
 
 
 def infodict(request: Request | WebSocket, type: str) -> dict:
     """Extract client information from request."""
     return {
-        "ip": request.client.host if request.client else "",
-        "user_agent": request.headers.get("user-agent", "")[:500],
-        "type": type,
+        "ip": request.client.host if request.client else None,
+        "user_agent": request.headers.get("user-agent", "")[:500] or None,
+        "session_type": type,
     }
 
 
 def set_session_cookie(response: Response, token: str) -> None:
     """Set the session token as an HTTP-only cookie."""
     response.set_cookie(
-        key="auth",
+        key=AUTH_COOKIE_NAME,
         value=token,
         max_age=int(EXPIRES.total_seconds()),
         httponly=True,
         secure=True,
+        path="/",
+        samesite="lax",
+    )
+
+
+def clear_session_cookie(response: Response) -> None:
+    # FastAPI's delete_cookie does not set the secure attribute
+    response.set_cookie(
+        key=AUTH_COOKIE_NAME,
+        value="",
+        max_age=0,
+        expires=0,
+        httponly=True,
+        secure=True,
+        path="/",
+        samesite="lax",
     )

paskia/fastapi/user.py

@@ -0,0 +1,162 @@
+from datetime import timezone
+from uuid import UUID
+
+from fastapi import (
+    Body,
+    FastAPI,
+    HTTPException,
+    Request,
+    Response,
+)
+from fastapi.responses import JSONResponse
+
+from paskia.authsession import (
+    delete_credential,
+    expires,
+    get_session,
+)
+from paskia.fastapi import authz, session
+from paskia.fastapi.session import AUTH_COOKIE
+from paskia.globals import db
+from paskia.util import hostutil, passphrase, tokens
+from paskia.util.tokens import decode_session_key, session_key
+
+app = FastAPI()
+
+
+@app.exception_handler(authz.AuthException)
+async def auth_exception_handler(_request, exc: authz.AuthException):
+    """Handle AuthException with auth info for UI."""
+    return JSONResponse(
+        status_code=exc.status_code,
+        content=await authz.auth_error_content(exc),
+    )
+
+
+@app.put("/display-name")
+async def user_update_display_name(
+    request: Request,
+    response: Response,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
+):
+    if not auth:
+        raise authz.AuthException(
+            status_code=401, detail="Authentication Required", mode="login"
+        )
+    try:
+        s = await get_session(auth, host=request.headers.get("host"))
+    except ValueError as e:
+        raise authz.AuthException(
+            status_code=401, detail="Session expired", mode="login"
+        ) from e
+    new_name = (payload.get("display_name") or "").strip()
+    if not new_name:
+        raise HTTPException(status_code=400, detail="display_name required")
+    if len(new_name) > 64:
+        raise HTTPException(status_code=400, detail="display_name too long")
+    await db.instance.update_user_display_name(s.user_uuid, new_name)
+    return {"status": "ok"}
+
+
+@app.post("/logout-all")
+async def api_logout_all(request: Request, response: Response, auth=AUTH_COOKIE):
+    if not auth:
+        return {"message": "Already logged out"}
+    try:
+        s = await get_session(auth, host=request.headers.get("host"))
+    except ValueError:
+        raise authz.AuthException(
+            status_code=401, detail="Session expired", mode="login"
+        )
+    await db.instance.delete_sessions_for_user(s.user_uuid)
+    session.clear_session_cookie(response)
+    return {"message": "Logged out from all hosts"}
+
+
+@app.delete("/session/{session_id}")
+async def api_delete_session(
+    request: Request,
+    response: Response,
+    session_id: str,
+    auth=AUTH_COOKIE,
+):
+    if not auth:
+        raise authz.AuthException(
+            status_code=401, detail="Authentication Required", mode="login"
+        )
+    try:
+        current_session = await get_session(auth, host=request.headers.get("host"))
+    except ValueError as exc:
+        raise authz.AuthException(
+            status_code=401, detail="Session expired", mode="login"
+        ) from exc
+
+    try:
+        target_key = decode_session_key(session_id)
+    except ValueError as exc:
+        raise HTTPException(
+            status_code=400, detail="Invalid session identifier"
+        ) from exc
+
+    target_session = await db.instance.get_session(target_key)
+    if not target_session or target_session.user_uuid != current_session.user_uuid:
+        raise HTTPException(status_code=404, detail="Session not found")
+
+    await db.instance.delete_session(target_key)
+    current_terminated = target_key == session_key(auth)
+    if current_terminated:
+        session.clear_session_cookie(response)  # explicit because 200
+    return {"status": "ok", "current_session_terminated": current_terminated}
+
+
+@app.delete("/credential/{uuid}")
+async def api_delete_credential(
+    request: Request,
+    response: Response,
+    uuid: UUID,
+    auth: str = AUTH_COOKIE,
+):
+    # Require recent authentication for sensitive operation
+    await authz.verify(auth, [], host=request.headers.get("host"), max_age="5m")
+    try:
+        await delete_credential(uuid, auth, host=request.headers.get("host"))
+    except ValueError as e:
+        raise authz.AuthException(
+            status_code=401, detail="Session expired", mode="login"
+        ) from e
+    return {"message": "Credential deleted successfully"}
+
+
+@app.post("/create-link")
+async def api_create_link(
+    request: Request,
+    response: Response,
+    auth=AUTH_COOKIE,
+):
+    # Require recent authentication for sensitive operation
+    await authz.verify(auth, [], host=request.headers.get("host"), max_age="5m")
+    try:
+        s = await get_session(auth, host=request.headers.get("host"))
+    except ValueError as e:
+        raise authz.AuthException(
+            status_code=401, detail="Session expired", mode="login"
+        ) from e
+    token = passphrase.generate()
+    expiry = expires()
+    await db.instance.create_reset_token(
+        user_uuid=s.user_uuid,
+        key=tokens.reset_key(token),
+        expiry=expiry,
+        token_type="device addition",
+    )
+    url = hostutil.reset_link_url(token)
+    return {
+        "message": "Registration link generated successfully",
+        "url": url,
+        "expires": (
+            expiry.astimezone(timezone.utc).isoformat().replace("+00:00", "Z")
+            if expiry.tzinfo
+            else expiry.replace(tzinfo=timezone.utc).isoformat().replace("+00:00", "Z")
+        ),
+    }

paskia/fastapi/ws.py

@@ -1,54 +1,36 @@
-import logging
-from functools import wraps
 from uuid import UUID
 
-from fastapi import Cookie, FastAPI, WebSocket, WebSocketDisconnect
-from webauthn.helpers.exceptions import InvalidAuthenticationResponse
-
-from ..authsession import create_session, expires, get_reset, get_session
-from ..globals import db, passkey
-from ..util import passphrase
-from ..util.tokens import create_token, session_key
-from .session import infodict
-
-
-# WebSocket error handling decorator
-def websocket_error_handler(func):
-    @wraps(func)
-    async def wrapper(ws: WebSocket, *args, **kwargs):
-        try:
-            await ws.accept()
-            return await func(ws, *args, **kwargs)
-        except WebSocketDisconnect:
-            pass
-        except (ValueError, InvalidAuthenticationResponse) as e:
-            await ws.send_json({"detail": str(e)})
-        except Exception:
-            logging.exception("Internal Server Error")
-            await ws.send_json({"detail": "Internal Server Error"})
-
-    return wrapper
+from fastapi import FastAPI, WebSocket
 
+from paskia.authsession import create_session, get_reset, get_session
+from paskia.fastapi import authz, remote
+from paskia.fastapi.session import AUTH_COOKIE, infodict
+from paskia.fastapi.wsutil import validate_origin, websocket_error_handler
+from paskia.globals import db, passkey
+from paskia.util import passphrase
+from paskia.util.tokens import create_token, session_key
 
 # Create a FastAPI subapp for WebSocket endpoints
 app = FastAPI()
 
+# Mount the remote auth WebSocket endpoints
+app.mount("/remote-auth", remote.app)
+
 
 async def register_chat(
     ws: WebSocket,
     user_uuid: UUID,
     user_name: str,
+    origin: str,
     credential_ids: list[bytes] | None = None,
-    origin: str | None = None,
 ):
     """Generate registration options and send them to the client."""
     options, challenge = passkey.instance.reg_generate_options(
         user_id=user_uuid,
         user_name=user_name,
         credential_ids=credential_ids,
-        origin=origin,
     )
-    await ws.send_json(options)
+    await ws.send_json({"optionsJSON": options})
     response = await ws.receive_json()
     return passkey.instance.reg_verify(response, challenge, user_uuid, origin=origin)
 
@@ -56,24 +38,31 @@ async def register_chat(
 @app.websocket("/register")
 @websocket_error_handler
 async def websocket_register_add(
-    ws: WebSocket, reset: str | None = None, name: str | None = None, auth=Cookie(None)
+    ws: WebSocket,
+    reset: str | None = None,
+    name: str | None = None,
+    auth=AUTH_COOKIE,
 ):
     """Register a new credential for an existing user.
 
     Supports either:
-    - Normal session via auth cookie
+    - Normal session via auth cookie (requires recent authentication)
     - Reset token supplied as ?reset=... (auth cookie ignored)
     """
-    origin = ws.headers["origin"]
+    origin = validate_origin(ws)
+    host = origin.split("://", 1)[1]
     if reset is not None:
         if not passphrase.is_well_formed(reset):
-            raise ValueError("Invalid reset token")
+            raise ValueError(
+                f"The reset link for {passkey.instance.rp_name} is invalid or has expired"
+            )
         s = await get_reset(reset)
-    else:
-        if not auth:
-            raise ValueError("Authentication Required")
-        s = await get_session(auth)
         user_uuid = s.user_uuid
+    else:
+        # Require recent authentication for adding a new passkey
+        ctx = await authz.verify(auth, perm=[], host=host, max_age="5m")
+        user_uuid = ctx.session.user_uuid
+        s = ctx.session
 
     # Get user information and determine effective user_name for this registration
     user = await db.instance.get_user_by_uuid(user_uuid)
@@ -85,18 +74,20 @@ async def websocket_register_add(
     challenge_ids = await db.instance.get_credentials_by_user_uuid(user_uuid)
 
     # WebAuthn registration
-    credential = await register_chat(ws, user_uuid, user_name, challenge_ids, origin)
+    credential = await register_chat(ws, user_uuid, user_name, origin, challenge_ids)
 
     # Create a new session and store everything in database
     token = create_token()
+    metadata = infodict(ws, "authenticated")
     await db.instance.create_credential_session(  # type: ignore[attr-defined]
         user_uuid=user_uuid,
         credential=credential,
         reset_key=(s.key if reset is not None else None),
         session_key=session_key(token),
-        session_expires=expires(),
-        session_info=infodict(ws, "authenticated"),
         display_name=user_name,
+        host=host,
+        ip=metadata.get("ip"),
+        user_agent=metadata.get("user_agent"),
     )
     auth = token
 
@@ -113,25 +104,55 @@ async def websocket_register_add(
 
 @app.websocket("/authenticate")
 @websocket_error_handler
-async def websocket_authenticate(ws: WebSocket):
-    origin = ws.headers["origin"]
-    options, challenge = passkey.instance.auth_generate_options()
-    await ws.send_json(options)
+async def websocket_authenticate(ws: WebSocket, auth=AUTH_COOKIE):
+    origin = validate_origin(ws)
+    host = origin.split("://", 1)[1]
+
+    # If there's an existing session, restrict to that user's credentials (reauth)
+    session_user_uuid = None
+    credential_ids = None
+    if auth:
+        try:
+            session = await get_session(auth, host=host)
+            session_user_uuid = session.user_uuid
+            credential_ids = await db.instance.get_credentials_by_user_uuid(
+                session_user_uuid
+            )
+        except ValueError:
+            pass  # Invalid/expired session - allow normal authentication
+
+    options, challenge = passkey.instance.auth_generate_options(
+        credential_ids=credential_ids
+    )
+    await ws.send_json({"optionsJSON": options})
     # Wait for the client to use his authenticator to authenticate
     credential = passkey.instance.auth_parse(await ws.receive_json())
     # Fetch from the database by credential ID
+    try:
         stored_cred = await db.instance.get_credential_by_id(credential.raw_id)
+    except ValueError:
+        raise ValueError(
+            f"This passkey is no longer registered with {passkey.instance.rp_name}"
+        )
+
+    # If reauth mode, verify the credential belongs to the session's user
+    if session_user_uuid and stored_cred.user_uuid != session_user_uuid:
+        raise ValueError("This passkey belongs to a different account")
+
     # Verify the credential matches the stored data
-    passkey.instance.auth_verify(credential, challenge, stored_cred, origin=origin)
+    passkey.instance.auth_verify(credential, challenge, stored_cred, origin)
     # Update both credential and user's last_seen timestamp
     await db.instance.login(stored_cred.user_uuid, stored_cred)
 
     # Create a session token for the authenticated user
     assert stored_cred.uuid is not None
+    metadata = infodict(ws, "auth")
     token = await create_session(
         user_uuid=stored_cred.user_uuid,
-        info=infodict(ws, "auth"),
         credential_uuid=stored_cred.uuid,
+        host=host,
+        ip=metadata.get("ip") or "",
+        user_agent=metadata.get("user_agent") or "",
     )
 
     await ws.send_json(

paskia/fastapi/wsutil.py

@@ -0,0 +1,91 @@
+"""
+Shared WebSocket utilities for FastAPI endpoints.
+"""
+
+import logging
+from functools import wraps
+
+import base64url
+from fastapi import WebSocket, WebSocketDisconnect
+from webauthn.helpers.exceptions import InvalidAuthenticationResponse
+
+from paskia.fastapi import authz
+from paskia.globals import passkey
+from paskia.util import pow
+
+
+def websocket_error_handler(func):
+    """Decorator for WebSocket endpoints that handles common errors."""
+
+    @wraps(func)
+    async def wrapper(ws: WebSocket, *args, **kwargs):
+        try:
+            await ws.accept()
+            return await func(ws, *args, **kwargs)
+        except WebSocketDisconnect:
+            pass
+        except authz.AuthException as e:
+            await ws.send_json(
+                {
+                    "status": e.status_code,
+                    **(await authz.auth_error_content(e)),
+                }
+            )
+        except (ValueError, InvalidAuthenticationResponse) as e:
+            await ws.send_json({"status": 401, "detail": str(e)})
+        except Exception:
+            logging.exception("Internal Server Error")
+            await ws.send_json({"status": 500, "detail": "Internal Server Error"})
+
+    return wrapper
+
+
+async def require_pow(ws: WebSocket, work: int | None = None) -> None:
+    """Send a PoW challenge and verify the client's solution.
+
+    Sends: {"pow": {"challenge": "<base64>", "work": 10}}
+    Expects: {"pow": "<base64-solution>"}
+
+    Args:
+        ws: WebSocket connection
+        work: PoW difficulty level (default: pow.DEFAULT_WORK)
+
+    Raises:
+        ValueError: If the PoW solution is invalid
+    """
+    challenge = pow.generate_challenge()
+    if work is None:
+        work = pow.DEFAULT_WORK
+
+    await ws.send_json(
+        {
+            "pow": {
+                "challenge": base64url.enc(challenge),
+                "work": work,
+            }
+        }
+    )
+
+    response = await ws.receive_json()
+    solution_b64 = response.get("pow")
+    if not solution_b64:
+        raise ValueError("PoW solution required")
+
+    try:
+        solution = base64url.dec(solution_b64)
+    except Exception:
+        raise ValueError("Invalid PoW solution encoding")
+
+    pow.verify_pow(challenge, solution, work)
+
+
+def validate_origin(ws: WebSocket) -> str:
+    """Extract and validate origin from WebSocket request headers.
+
+    Raises:
+        ValueError: If origin header is missing or not in allowed list
+    """
+    origin = ws.headers.get("origin")
+    if not origin:
+        raise ValueError("Origin header is required for WebSocket connections")
+    return passkey.instance.validate_origin(origin)

paskia/globals.py

@@ -1,7 +1,7 @@
 from typing import Generic, TypeVar
 
-from .db import DatabaseInterface
-from .sansio import Passkey
+from paskia.db import DatabaseInterface
+from paskia.sansio import Passkey
 
 T = TypeVar("T")
 
@@ -29,9 +29,7 @@ class Manager(Generic[T]):
 async def init(
     rp_id: str = "localhost",
     rp_name: str | None = None,
-    origin: str | None = None,
-    default_admin: str | None = None,
-    default_org: str | None = None,
+    origins: list[str] | None = None,
     *,
     bootstrap: bool = True,
 ) -> None:
@@ -41,11 +39,13 @@ async def init(
     In FastAPI lifespan we call with bootstrap=False to avoid duplicate bootstrapping
     since the CLI performs it once before servers start.
     """
+    from . import remoteauth
+
     # Initialize passkey instance with provided parameters
     passkey.instance = Passkey(
         rp_id=rp_id,
         rp_name=rp_name or rp_id,
-        origin=origin,
+        origins=origins,
     )
 
     # Test if we have a database already initialized, otherwise use SQL
@@ -56,11 +56,14 @@ async def init(
 
         await sql.init()
 
+    # Initialize remote auth manager
+    await remoteauth.init()
+
     if bootstrap:
         # Bootstrap system if needed
         from .bootstrap import bootstrap_if_needed
 
-        await bootstrap_if_needed(default_admin, default_org)
+        await bootstrap_if_needed()
 
 
 # Global instances

paskia/remoteauth.py

@@ -0,0 +1,359 @@
+"""
+Cross-device (remote) authentication support.
+
+This module manages the flow for authenticating from another device:
+1. Device A (requesting) creates a remote auth request and displays QR/link
+2. Device B (authenticating) opens the link and authenticates with passkey
+3. Device A receives the session via WebSocket notification
+
+Alternative flow (initiated from profile/authenticating device):
+1. Device A (requesting) creates request and displays short pairing code
+2. Device B (authenticating) enters the pairing code in their profile
+3. Device B authenticates, Device A receives the session
+
+The requests are stored in-memory with short expiration (5 minutes).
+The link uses the same /{token} endpoint as reset tokens, but the server
+distinguishes between them by checking if the token exists in remoteauth first.
+The first 3 words of the token serve as the pairing code for manual entry.
+"""
+
+import asyncio
+import logging
+from dataclasses import dataclass
+from datetime import datetime, timedelta, timezone
+from typing import Callable
+from uuid import UUID
+
+from paskia.util import passphrase
+
+# Remote auth requests expire after this duration
+REMOTE_AUTH_LIFETIME = timedelta(minutes=5)
+
+
+@dataclass
+class RemoteAuthRequest:
+    """A pending remote authentication request."""
+
+    key: str  # The 3-word passphrase code
+    created_at: datetime
+    host: str  # The host where the session should be created
+    ip: str  # IP of the requesting device
+    user_agent: str  # User agent of the requesting device
+    action: str = "login"  # "login" or "register"
+    locked: bool = False  # True once the authenticating device has entered the code
+    # Callback to notify the requesting device when auth completes
+    # Takes (session_token, user_uuid, credential_uuid, reset_token) or (None, None, None, None) on cancel/expire
+    notify: (
+        Callable[[str | None, UUID | None, UUID | None, str | None], None] | None
+    ) = None
+    # Callback to notify the requesting device when action is locked
+    # Takes (action) to confirm what action was locked
+    action_locked_notify: Callable[[str], None] | None = None
+    # Set when authentication completes
+    completed: bool = False
+    denied: bool = False  # True if explicitly denied by the authenticating device
+    session_token: str | None = None
+    user_uuid: UUID | None = None
+    credential_uuid: UUID | None = None
+    reset_token: str | None = None
+
+
+class RemoteAuthManager:
+    """Manages pending remote authentication requests."""
+
+    def __init__(self):
+        self._requests: dict[str, RemoteAuthRequest] = {}  # keyed by 3-word code
+        self._cleanup_task: asyncio.Task | None = None
+        self._lock = asyncio.Lock()
+
+    async def start(self):
+        """Start the cleanup background task."""
+        if self._cleanup_task is None:
+            self._cleanup_task = asyncio.create_task(self._cleanup_loop())
+
+    async def stop(self):
+        """Stop the cleanup background task."""
+        if self._cleanup_task:
+            self._cleanup_task.cancel()
+            try:
+                await self._cleanup_task
+            except asyncio.CancelledError:
+                pass
+            self._cleanup_task = None
+
+    async def _cleanup_loop(self):
+        """Periodically clean up expired requests."""
+        while True:
+            try:
+                await asyncio.sleep(60)  # Check every minute
+                await self._cleanup_expired()
+            except asyncio.CancelledError:
+                break
+            except Exception:
+                logging.exception("Error in remote auth cleanup loop")
+
+    async def _cleanup_expired(self):
+        """Remove expired requests and notify waiting clients."""
+        now = datetime.now(timezone.utc)
+        expired_keys = []
+        async with self._lock:
+            for key, req in self._requests.items():
+                if now > req.created_at + REMOTE_AUTH_LIFETIME:
+                    expired_keys.append(key)
+            for key in expired_keys:
+                req = self._requests.pop(key)
+                if req.notify and not req.completed:
+                    try:
+                        req.notify(None, None, None, None)
+                    except Exception:
+                        pass
+
+    async def create_request(
+        self,
+        host: str,
+        ip: str,
+        user_agent: str,
+        action: str = "login",
+    ) -> tuple[str, datetime]:
+        """Create a new remote auth request.
+
+        The code is a 3-word passphrase.
+        We ensure uniqueness across concurrent requests.
+
+        Returns:
+            (code, expiry) - The 3-word passphrase code and expiration time
+        """
+        now = datetime.now(timezone.utc)
+        expiry = now + REMOTE_AUTH_LIFETIME
+
+        async with self._lock:
+            # Generate unique 3-word code
+            max_attempts = 100
+            for _ in range(max_attempts):
+                code = passphrase.generate(n=passphrase.N_WORDS_SHORT)
+                if code not in self._requests:
+                    break
+            else:
+                # Extremely unlikely but handle gracefully
+                raise ValueError("Unable to generate unique code")
+
+            request = RemoteAuthRequest(
+                key=code,
+                created_at=now,
+                host=host,
+                ip=ip,
+                user_agent=user_agent,
+                action=action,
+            )
+
+            self._requests[code] = request
+
+        return code, expiry
+
+    async def get_request(self, code: str) -> RemoteAuthRequest | None:
+        """Get a pending request by code, if valid and not expired."""
+        # Normalize: lowercase, dot-separated words
+        normalized = code.lower().strip().replace(" ", ".")
+        if not passphrase.is_well_formed(normalized, n=passphrase.N_WORDS_SHORT):
+            return None
+        async with self._lock:
+            req = self._requests.get(normalized)
+            if req is None:
+                return None
+            now = datetime.now(timezone.utc)
+            if now > req.created_at + REMOTE_AUTH_LIFETIME:
+                # Expired
+                del self._requests[normalized]
+                return None
+            return req
+
+    async def set_notify_callback(
+        self,
+        token: str,
+        callback: Callable[[str | None, UUID | None, UUID | None, str | None], None],
+    ) -> bool:
+        """Set the notification callback for a request.
+
+        Returns True if the request exists and callback was set.
+        """
+        async with self._lock:
+            req = self._requests.get(token)
+            if req is None:
+                return False
+            req.notify = callback
+            return True
+
+    async def set_action_locked_callback(
+        self,
+        token: str,
+        callback: Callable[[str], None],
+    ) -> bool:
+        """Set the callback for when the action is locked.
+
+        Returns True if the request exists and callback was set.
+        """
+        async with self._lock:
+            req = self._requests.get(token)
+            if req is None:
+                return False
+            req.action_locked_notify = callback
+            return True
+
+    async def update_action(
+        self,
+        token: str,
+        action: str,
+    ) -> bool:
+        """Update the action for a request (only if not locked).
+
+        Returns True if the request exists and was updated.
+        """
+        if action not in ("login", "register"):
+            return False
+        async with self._lock:
+            req = self._requests.get(token)
+            if req is None or req.locked:
+                return False
+            req.action = action
+            return True
+
+    async def lock_action(
+        self,
+        token: str,
+    ) -> str | None:
+        """Lock the action for a request (called when authenticating device enters code).
+
+        Returns the locked action, or None if request doesn't exist or is already locked.
+        Notifies the requesting device via action_locked_notify callback.
+        """
+        async with self._lock:
+            req = self._requests.get(token)
+            if req is None:
+                return None
+            if req.locked:
+                # Already locked by another authenticating device
+                return None
+            req.locked = True
+            action = req.action
+            if req.action_locked_notify:
+                try:
+                    req.action_locked_notify(action)
+                except Exception:
+                    pass
+            return action
+
+    async def complete_request(
+        self,
+        token: str,
+        session_token: str | None,
+        user_uuid: UUID,
+        credential_uuid: UUID,
+        reset_token: str | None = None,
+    ) -> bool:
+        """Mark a request as completed with the authentication result.
+
+        The request is removed after notifying the waiting client.
+        Returns True if the request existed and was completed.
+        """
+        async with self._lock:
+            req = self._requests.pop(token, None)
+            if req is None:
+                return False
+            if req.notify:
+                try:
+                    req.notify(session_token, user_uuid, credential_uuid, reset_token)
+                except Exception:
+                    pass
+            return True
+
+    async def cancel_request(
+        self, token: str, *, denied: bool = False
+    ) -> RemoteAuthRequest | None:
+        """Cancel and remove a request.
+
+        Args:
+            token: The request token
+            denied: If True, marks this as an explicit denial (not just timeout/disconnect)
+
+        Returns the removed request if it existed, None otherwise.
+        """
+        async with self._lock:
+            req = self._requests.pop(token, None)
+            if req is None:
+                return None
+            if denied:
+                req.denied = True
+            if req.notify and not req.completed:
+                try:
+                    # Pass denied status through a special UUID value (all zeros means denied)
+                    if denied:
+                        req.notify(None, UUID(int=0), None, None)
+                    else:
+                        req.notify(None, None, None, None)
+                except Exception:
+                    pass
+            return req
+
+    def get_connection_count(self) -> int:
+        """Get the current count of open WebSocket connections.
+
+        This is used to determine PoW difficulty based on load.
+        """
+        # Count is maintained externally by the WebSocket endpoints
+        return getattr(self, "_ws_count", 0)
+
+    def increment_connections(self) -> None:
+        """Increment the WebSocket connection counter."""
+        self._ws_count = getattr(self, "_ws_count", 0) + 1
+
+    def decrement_connections(self) -> None:
+        """Decrement the WebSocket connection counter."""
+        self._ws_count = max(0, getattr(self, "_ws_count", 0) - 1)
+
+    def get_pow_difficulty(self) -> int:
+        """Get PoW difficulty based on current WebSocket connection count.
+
+        Uses NORMAL difficulty with low load (< 10 connections),
+        HARD difficulty with high load (>= 10 connections).
+
+        Returns:
+            PoW work units (pow.NORMAL or pow.HARD)
+        """
+        from paskia.util import pow
+
+        count = self.get_connection_count()
+        return pow.HARD if count >= 10 else pow.NORMAL
+
+    async def consume_request(self, token: str) -> RemoteAuthRequest | None:
+        """Get and remove a request (for use by the authenticating device)."""
+        if not passphrase.is_well_formed(token, n=passphrase.N_WORDS_SHORT):
+            return None
+        async with self._lock:
+            req = self._requests.get(token)
+            if req is None:
+                return None
+            now = datetime.now(timezone.utc)
+            if now > req.created_at + REMOTE_AUTH_LIFETIME:
+                del self._requests[token]
+                return None
+            # Don't remove yet - wait until completion
+            return req
+
+
+# Global instance
+instance: RemoteAuthManager | None = None
+
+
+async def init():
+    """Initialize the global remote auth manager."""
+    global instance
+    instance = RemoteAuthManager()
+    await instance.start()
+
+
+async def shutdown():
+    """Shutdown the global remote auth manager."""
+    global instance
+    if instance:
+        await instance.stop()
+        instance = None