Fix frontend-build location. Cleanup.

Fix test expected HTTP code.
Add missing set_session_host on dunder all.
2026-01-25 03:26:22 +00:00 · 2026-01-25 03:20:28 +00:00 · 2026-01-25 03:17:32 +00:00 · 2026-01-25 03:15:50 +00:00 · 2026-01-24 01:08:00 +00:00 · 2026-01-24 00:58:18 +00:00
82 changed files with 7121 additions and 3809 deletions
@@ -5,6 +5,7 @@ dist/
 *.lock
 package-lock.json
 paskia.sqlite
+paskia.jsonl
 /paskia/frontend-build
 /paskia/_version.py
 coverage-html/
@@ -1,105 +0,0 @@
-# Paskia API Documentation
-
-This document lists the HTTP and WebSocket endpoints exposed by the Paskia
-service and how they behave depending on whether a dedicated authentication host
-(`--auth-host` / environment `PASSKEY_AUTH_HOST`) is configured.
-
-## Base Paths & Host Modes
-
-Two deployment modes:
-
-1. Multi‑host (default – no `--auth-host` provided)
-   - All endpoints are reachable on any host under the `/auth/` prefix.
-   - A convenience root (`/`) also serves the main app.
-
-2. Dedicated auth host (`--auth-host auth.example.com`)
-   - The specified auth host serves the UI at the root (`/`, `/admin/`, reset tokens, etc.).
-   - Other (non‑auth) hosts show a lightweight account summary at `/` or `/auth/`, while other UI routes still redirect to the auth host.
-   - Restricted endpoints on non‑auth hosts return `404` instead of redirecting.
-
-### Path Mapping When Auth Host Enabled
-
-| Purpose | On Auth Host | On Other Hosts (incoming) | Action |
-|---------|--------------|---------------------------|--------|
-| Main UI | `/` | `/auth/` or `/` | Serve account summary SPA (no redirect) |
-| Admin UI root | `/admin/` | `/auth/admin/` or `/admin/` | Redirect -> auth host `/admin/` (strip `/auth`) |
-| Reset / device addition token | `/{token}` | `/auth/{token}` | Redirect -> auth host `/{token}` (strip `/auth`) |
-| Static assets | `/auth/assets/*` | `/auth/assets/*` | Served directly (no redirect) |
-| Unrestricted API | `/auth/api/...` | `/auth/api/...` | Served directly |
-| Restricted API (admin,user,ws namespaces) | `/auth/api/{admin|user|ws}*` | same path | 404 on non‑auth hosts |
-| WebSocket (register/auth) | `/auth/ws/*` | `/auth/ws/*` | 404 on non‑auth hosts |
-
-Notes:
- “Strip `/auth`” means only when the path starts with that exact segment.
- A reset token is a single path segment validated by server logic; malformed tokens 404.
- Method and body are preserved for UI redirects (307 Temporary Redirect).
-
-## HTTP UI Endpoints
-
-| Method | Path (multi‑host) | Path (auth host) | Description |
-|--------|-------------------|------------------|-------------|
-| GET | `/auth/` | `/` | Main authentication SPA (non-auth hosts show an account summary view) |
-| GET | `/auth/admin/` | `/admin/` | Admin SPA root |
-| GET | `/auth/{reset_token}` | `/{reset_token}` | Reset / device addition SPA (token validated) |
-
-## Core API (Unrestricted – available on all hosts)
-
-Always under `/auth/api/` (even on auth host):
-
-| Method | Path | Description |
-|--------|------|-------------|
-| GET | `/auth/restricted/` | Authentication UI for iframe embedding (supports `?mode=login` or `?mode=reauth`) |
-|--------|------|-------------|
-| POST | `/auth/api/validate` | Validate & (conditionally) renew session |
-| GET | `/auth/api/forward` | Auth proxy endpoint for reverse proxies (204 or 4xx) |
-| POST | `/auth/api/set-session` | Set cookie from Bearer token |
-| POST | `/auth/api/logout` | Logout current session |
-| POST | `/auth/api/user-info` | Authenticated user + context info (also handles reset tokens) |
-| POST | `/auth/api/create-link` | Create a device addition link (reset token) |
-| DELETE | `/auth/api/credential/{uuid}` | Delete user credential |
-| DELETE | `/auth/api/session/{session_id}` | Terminate a specific session |
-| POST | `/auth/api/user/logout-all` | Terminate all sessions for the user |
-| PUT | `/auth/api/user/display-name` | Update display name |
-
-## Restricted API Namespaces
-
-When `--auth-host` is set, requests to these paths on non‑auth hosts return 404:
-
-| Namespace | Examples |
-|-----------|----------|
-| `/auth/api/admin` | `/auth/api/admin/orgs`, `/auth/api/admin/orgs/{uuid}` ... |
-| `/auth/api/user` | Segment prefix – includes `/auth/api/user/...` endpoints (logout-all, display-name, session, credential) |
-| `/auth/api/ws` | (Reserved / future) |
-
-## WebSockets (Passkey)
-
-| Path | Description | Host Mode Behavior |
-|------|-------------|--------------------|
-| `/auth/ws/register` | Register new credential (new or existing user) | 404 on non‑auth hosts when auth host configured |
-| `/auth/ws/authenticate` | Authenticate user & issue session | 404 on non‑auth hosts when auth host configured |
-
-## Redirection & Status Codes
-
-| Scenario | Response |
-|----------|----------|
-| UI path on non‑auth host (auth host configured) | 307 redirect to auth host; `/auth` prefix stripped |
-| Reset token UI path on non‑auth host | 307 redirect (token preserved) |
-| Restricted API on non‑auth host | 404 |
-| Unrestricted API on any host | Normal response |
-| No auth host configured | All hosts behave like multi-host mode (no redirects; everything accessible) |
-
-## Headers for /auth/api/forward
-See `Headers.md` for details of headers returned on success (204).
-
-## Notes for Integrators
-1. Always use absolute `/auth/api/...` paths for programmatic requests (they do not move when an auth host is introduced).
-2. Bookmark / deep links to UI should resolve correctly after redirection if users access via a non-auth application host.
-3. Treat 404 from restricted namespaces on non-auth hosts as a signal to direct users to the central auth site.
-
-## Environment & CLI Summary
-| Option | Effect |
-|--------|--------|
-| `--auth-host` / `PASSKEY_AUTH_HOST` | Enables dedicated host mode, root-mounts UI there, restricts certain namespaces elsewhere |
-
---
-This document reflects current behavior of the middleware-based host routing logic.
@@ -1,64 +0,0 @@
-## Caddy configuration
-
-We provide a few Caddy snippets that make the configuration easier, although the `forward_auth` directive of Caddy can be used directly as well. Place the auth folder with the snippets where your Caddyfile is.
-
-What these snippets do
- Mount the auth UI at `/auth/` proxying to `:4401` (auth backend)
- Use the forward-auth interface `/auth/api/forward` to verify the required credentials
- Render a login page or a permission denied page if needed (without changing URL)
-
-Your backend may not use authentication at all, or it can make use of the user information passed via `Remote-*` headers by the authentication system, see [Headers.md](Headers.md) for details.
-
-### 1) Protect the full site (auth/all)
-
-Use this when you want “login required everywhere” which is useful to protect some service that doesn't have any authentication of its own:
-
-```caddyfile
-localhost {
-    import auth/all "" {
-        reverse_proxy :3000  # your app
-    }
-}
-```
-
-The auth/all protects the entire site with a simple directive. Put your normal setup inside the block. In this example we don't require any permissions, only that the user is logged in. Instead of `""` you may specify `perm=myapp:login` or other permissions.
-
-It is possible to add your own `handle @matcher` blocks prior importing `auth/all` for endpoints that don't require authentication, e.g. to exclude `/favicon.ico`.
-
-### 2) Different areas, different permissions (auth/setup, auth/require)
-
-When you need a more fine-grained control, use the auth/setup and auth/require snippets:
-
-```caddyfile
-localhost {
-    import auth/setup
-
-    @public path /.well-known/* /favicon.ico
-    handle @public {
-        root * /var/www/
-        file_server
-    }
-
-    @reports path /reports
-    handle @reports {
-        import auth/require perm=myapp:reports
-        reverse_proxy :3000
-    }
-
-    # Anywhere else, require login only
-    handle {
-        import auth/require ""
-        reverse_proxy :3000
-    }
-}
-```
-
-Note: We use the `handle @name` approach rather than `handle_path` to prevent the matched path being removed out of upstream URL. Unlike bare directives, these blocks will be tried in sequence and each can contain what you'd typically put in your site definition.
-
---
-
-## Override the auth backend URL (AUTH_UPSTREAM)
-
-By default, the auth service is contacted at localhost port 4401 ("for authentication required"). You can point Caddy to a different by setting the `AUTH_UPSTREAM` environment variable for Caddy.
-
-If unset, the snippets use `:4401` by default.
@@ -1,17 +0,0 @@
-## Headers your app receives
-
-When a request is allowed, the auth service adds these headers before proxying to your app (e.g., the service at `:3000`). Your app can use them for user context and authorization.
-
-| Header | Meaning | Example |
-|---|---|---|
-| `Remote-User` | Authenticated user UUID | `3f1a2b3c-4d5e-6789-abcd-ef0123456789` |
-| `Remote-Name` | User display name | `Jane Doe` |
-| `Remote-Org` | Organization UUID | `a1b2c3d4-1111-2222-3333-444455556666` |
-| `Remote-Org-Name` | Organization display name | `Acme Inc` |
-| `Remote-Role` | Role UUID | `b2c3d4e5-2222-3333-4444-555566667777` |
-| `Remote-Role-Name` | Role display name | `Administrators` |
-| `Remote-Groups` | Comma‑separated permissions the user has | `myapp:reports,auth:admin` |
-| `Remote-Session-Expires` | Session expiry timestamp (ISO 8601) | `2025-09-25T14:30:00Z` |
-| `Remote-Credential` | Credential UUID backing the session | `c3d4e5f6-3333-4444-5555-666677778888` |
-
-Note: Any incoming `Remote-*` headers from clients are stripped by our [Caddy configuration](Caddy.md), so that apps can trust these values.
@@ -30,16 +30,9 @@ Install [UV](https://docs.astral.sh/uv/getting-started/installation/) and run:
 uvx paskia serve --rp-id example.com
 ```

-On the first run it downloads the software and prints a registration link for the Admin. If you are going to be connecting `localhost` directly, for testing, leave out the rp-id.
+On the first run it downloads the software and prints a registration link for the Admin.  The server will start up on [localhost:4401](http://localhost:4401) *for authentication required*, serving for `*.example.com`. If you are going to be connecting `localhost` directly, for testing, leave out the rp-id.

-The server will start up on [localhost:4401](http://localhost:4401) "for authentication required", serving for `*.example.com`.
-
-Otherwise you will need a web server such as [Caddy](https://caddyserver.com/) to serve HTTPS on your actual domain names and proxy requests to Paskia and your backend apps.
-
-A quick example without any config file:
-```fish
-sudo caddy reverse-proxy --from example.com --to :4401
-```
+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 (see documentation below).

 For a permanent install of `paskia` CLI command, not needing `uvx`:

@@ -55,18 +48,17 @@ There is no config file. Pass only the options on CLI:
 paskia serve [options]
 ```

-Optional options:
+| Option | Description | Default |
+|--------|-------------|---------|
+| Listen address | One of *host***:***port* (default all hosts, port 4401) or **unix:***path***/paskia.socket** (Unix socket) | **localhost:4401** |
+| --rp-id *domain* | Main/top domain | **localhost** |
+| --rp-name *"text"* | Name of your company or site | Same as rp-id |
+| --origin *url* | Explicitly list the domain names served | **https://**_rp-id_ |
+| --auth-host *domain* | Dedicated authentication site (e.g., **auth.example.com**) | **Unspecified:** we use **/auth/** on **every** site under rp-id.|

- 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`)
+## Further Documentation

-## Documentation
-
- `API.md`: Complete HTTP and WebSocket API reference
- `Caddy.md`: Caddy configuration examples
- `Headers.md`: HTTP headers passed to protected applications
+- [Caddy configuration](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/Caddy.md)
+- [Trusted Headers for Backend Apps](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/Headers.md)
+- [Frontend integration](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/Integration.md)
+- [Paskia API](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/API.md)
@@ -0,0 +1,64 @@
+# Paskia API
+
+For integrating Paskia with your app frontend, see [integration](Integration.md).
+
+## Web Interface
+
+| Method | Path | What it is for | Notes |
+|---:|---|---|---|
+| GET | `/auth/` | User profile page | |
+| GET | `/auth/admin/` | Admin panel | Requires auth:admin (master) or org admin permissions. |
+| GET | `/auth/{token}` | Reset / add credential URL (QR code link) | E.g. `/auth/fun.cotton.fresh.xray.lava` |
+
+### Public JSON API: `/auth/api/*`
+
+| Method | Path | Used for | Notes |
+|---:|---|---|---|
+| GET | `/auth/api/settings` | Paskia configuration | Returns RP info + base paths + session cookie name |
+| POST | `/auth/api/user-info` | Full user profile | Basic information, credentials, sessions, permissions |
+| POST | `/auth/api/logout` | Terminate session and delete session cookie | Signs out of the current site |
+| POST | `/auth/api/validate` | Validate and renew session cookie | Optional query: `perm=` (repeatable), `max_age=` |
+| GET | `/auth/api/forward` | Validate access (Caddy/Nginx) | 204 on success; 401/403 otherwise (HTML if requested) |
+
+The `validate` and `forward` endpoints take query arguments `perm=` and `max_age=` for specific requirements on the validation of the current session.
+
+### User JSON API: `/auth/api/user/*`
+
+| Method | Path | Used for | Notes |
+|---:|---|---|---|
+| PUT | `/auth/api/user/display-name` | Update the user’s display name | Body: JSON `{ "display_name": "..." }` |
+| POST | `/auth/api/user/logout-all` | Terminate all user sessions | Clears current host cookie |
+| DELETE | `/auth/api/user/session/{session_id}` | Terminate one session | Session IDs are server-issued |
+| DELETE | `/auth/api/user/credential/{uuid}` | Delete a credential | Requires recent authentication |
+| POST | `/auth/api/user/create-link` | Create a device-add link | Requires recent authentication |
+
+These are used mostly from the user profile panel and modify the current user.
+
+### Admin API: `/auth/api/admin/*`
+
+Normally only used via admin panel, requires auth admin permissions and can modify any users, orgs and permissions the session has access to.
+
+E.g. Org admin cannot see anything of the other orgs that he has no admin access to. Master admin `auth:admin` can see everything and create and manage orgs.
+
+### WebSockets: `/auth/ws/*`
+
+| Path | Used for | Notes |
+|---|---|---|
+| `WS /auth/ws/authenticate` | Passkey authentication | Returns a session token |
+| `WS /auth/ws/register` | Register a new credential | Adding another passkey to current user or via reset token |
+| `WS /auth/ws/remote-auth/request` | Start a cross-device login/registration request | Used from unauthenticated client |
+| `WS /auth/ws/remote-auth/permit` | Approve/deny a pairing code | Used to accept the request, if same words are entered |
+
+These are for internal use only, but are documented here because they are the core piece in all passkey operations.
+
+### Auth host mode (`--auth-host`)
+
+#### On the auth host:
+- The Web UI is served at site root (e.g. admin UI at `/admin/`), and the `/auth/...` equivalents (e.g. `/auth/admin/`) redirect to the root paths.
+- All of the API stays under `/auth/api/*`
+- Auth WebSockets remain at `/auth/ws/*` but take connections from other hosts to issue sessions for each of those.
+
+#### On non-auth hosts:
+- `/auth/` shows only minimal profile and allows logging out of the current site
+- `/auth/api/*` is served normally.
+- `/auth/api/user/*`, `/auth/api/admin/*`, and `/auth/ws/*` don't exist.
@@ -0,0 +1,79 @@
+# Paskia Caddy Configuration
+
+[Caddy](https://caddyserver.com/) is a modern web server that makes setting up web services easy. We provide a few Caddy snippets that make the configuration even easier, although the `forward_auth` directive of Caddy can be used directly as well. Place the [auth folder](../caddy/auth) with the snippets `require` and `setup` where your config file is (e.g. `/etc/caddy/auth`)
+
+What these snippets do
+- `setup`: Mount the auth UI at `/auth/` proxying to `:4401`
+- `require`: Use `/auth/api/forward` for access control
+- Render a login page or a permission denied page if needed (without changing URL)
+
+Your backend may not use authentication at all, or it can make use of the user information passed via `Remote-*` headers by the authentication system, see [trusted headers](Headers.md) for details.
+
+We assume the normal unprotected **Caddyfile** for your site looks like this:
+
+```caddyfile
+app.example.com {
+    @public path /.well-known/* /favicon.ico
+    handle @public {
+        root * /var/www/
+        file_server
+    }
+
+    handle {
+        reverse_proxy :3000  # Your app backend
+    }
+}
+```
+
+Note: We use the `handle @name` approach rather than `handle_path` to keep the path unaltered. Unlike bare directives, these blocks will be tried in sequence and each can contain what you'd typically put in your site definition (by default `reverse_proxy` takes precedence and nothing reaches the static files).
+
+We will adapt from this to protect your app.
+
+### Protect your site (auth/setup, auth/require)
+
+```caddyfile
+app.example.com {
+    import auth/setup
+
+    @public path /.well-known/* /favicon.ico
+    handle @public {
+        root * /var/www/
+        file_server
+    }
+
+    @reports path /reports
+    handle @reports {
+        import auth/require perm=myapp:reports
+        reverse_proxy :3000
+    }
+
+    handle {
+        import auth/require max-age=12h
+        reverse_proxy :3000
+    }
+}
+```
+
+The above setup allows unauthenticated access to certain files, then implements two different access controls for your backend app depending on which path is accessed. Note that the perm and max-age options may be combined, e.g. `perm=myapp:admin&max-age=5min` on a very sensitive endpoint. This will require additional authentication if the passkey hasn't been used in the last 5 minutes (automatic session renewals don't affect this). Use `""` if you only want the user to be authenticated with no time or perm requirements.
+
+### Dedicated Authentication Site
+
+When you setup a separate subdomain for the authentication site, just add to your config another section for the auth host:
+
+```caddyfile
+auth.example.com {
+    reverse_proxy :4401
+}
+```
+
+Remember to specify `paskia serve --auth-host auth.example.com` to restrict the authentication services to this domain.
+
+Note that we still reserve `/auth/` on each site for logout page and any APIs your application may require, while full user profile and global options are only available on the auth host.
+
+Paskia does not require CORS configuration, but it can access the authentication and registration of auth host WS API from the other sites as WebSockets don't require any CORS.
+
+### Override the paskia backend address (AUTH_UPSTREAM)
+
+By default, the auth service is contacted at localhost port 4401. You can point Caddy to a different address by setting the `AUTH_UPSTREAM` environment variable for Caddy.
+
+If unset, the snippets use `:4401` by default.
@@ -0,0 +1,23 @@
+# Paskia Trusted Headers for Backend Apps
+
+| HTTP Header | Meaning | Example |
+|---|---|---|
+| `Remote-User` | Authenticated user UUID | **01c03276-b8f0-**… (string) |
+| `Remote-Name` | User display name | **John Doe** |
+| `Remote-Org` | Organization UUID | Identifier for user's org (string) |
+| `Remote-Org-Name` | Organization display name | **The Company Ltd.** |
+| `Remote-Role` | Role UUID | Identifier for user's role (string) |
+| `Remote-Role-Name` | Role display name | **Employee** |
+| `Remote-Groups` | Permissions the user has, comma separated | **auth:admin,yourapp:reports** |
+| `Remote-Session-Expires` | Session expiry timestamp (ISO 8601 UTC) | **2030-12-31T23:59:59Z** |
+| `Remote-Credential` | Credential UUID | Identifier for the sign-in passkey (string) |
+
+Similar headers are also used by other authentication systems like [Authelia](https://www.authelia.com/integration/trusted-header-sso/introduction/) to signal the backend application information about the signed in user.
+
+When a request is allowed, the auth service adds these headers by the forward-auth mechanism before proxying to your app as **request headers**. Your app can use them for user context to show on UI, or for its own authentication needs (e.g. prevent different orgs messing up with each other's data, logging which user performed an action).
+
+Only the UUID values should be used for identification needs, because they never change, even when things are renamed (display names change), and are never reused (created on authentication server). They are UUIDv7 so you can also extract the creation timestamp from them.
+
+Any `Remote-*` headers from clients are stripped by our [Caddy configuration](Caddy.md) to avoid dealing with any fake headers.
+
+Note: the headers are intended primarily for the backend, while either frontend or backend (passing the session cookie) can request `/auth/api/user-info` for more complete information, and that is the recommended way to do it in the frontend. See [integration](Integration.md) for more.
@@ -0,0 +1,43 @@
+# Integrating Paskia with your App
+
+Protect API routes with forward-auth (see [Caddy configuration](Caddy.md)). Optionally protect your app assets and not just the API.
+
+Catch response status 401/403 in fetch calls to protected endpoints and implement authentication flow in this case. The response is JSON and contains `detail` (an error message describing what is needed) and `auth.iframe` (a URL). Render that URL in an iframe and retry the request after authentication (see below).
+
+While the app is in (active) use, call `/auth/api/validate` occasionally to keep the session alive (session lifetime is 24h), otherwise the user will have to login every day. Max-age limits are unaffected by this and can be used on endpoints needing to reauthenticate with passkey more frequently.
+
+Fetch `/auth/api/user-info` to display user/session details, or link to `/auth/` if you prefer using the built-in profile UI and not having to do anything more.
+
+## Authentication Flow (iframe)
+
+```js
+// Show an authentication dialog
+const iframe = document.createElement('iframe')
+iframe.src = auth.url   // from 401/403 response JSON
+iframe.style.cssText = `
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  z-index: 9999;
+  background: transparent;
+  backdrop-filter: blur(0.1rem) brightness(0.7);
+`
+document.body.appendChild(iframe)
+
+// Wait until user is finished with the dialog
+const handler = ev => {
+  if (ev.origin !== location.origin) return
+  iframe.remove()
+  removeEventListener('message', handler)
+  if (ev.data?.type === 'auth-success') retry_original_fetch()
+}
+addEventListener('message', handler)
+```
+
+This describes the frontend flow for handling 401/403 responses from endpoints protected by Paskia forward-auth, without ever exiting your app.
+
+When a protected request fails, the backend returns 401 (needs auth / reauth) or 403 (missing permission). For API requests, the response is JSON that includes an iframe URL. Your app should render that URL in a full-screen iframe overlay, and retry the request after the iframe reports success. If it reports `auth-cancel`, don't try again. The backdrop for the dialog is a stylistic choice, and you can style the background shown with the dialog any way you wish, and consider using CSS file with the iframe rather than inline styles as used in the example.
+
+Following this flow the user gets authenticated properly and after that your app keeps running as if nothing ever happened.
@@ -11,8 +11,10 @@ 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 { adminUiPath, makeUiHref } from '@/utils/settings'
 import { apiJson } from '@/utils/api'
+import { getDirection } from '@/utils/keynav'
+import { goBack } from '@/utils/helpers'

 const info = ref(null)
 const loading = ref(true)
@@ -25,8 +27,6 @@ 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:._~-]+$'
@@ -35,8 +35,22 @@ const renameIdValue = ref('')
 const editingPermDisplay = ref(null)
 const renameDisplayValue = ref('')
 const dialog = ref({ type: null, data: null, busy: false, error: '' })
+const dialogPreviousFocus = ref(null)  // Track element that had focus before dialog opened
 const safeIdRegex = /[^A-Za-z0-9:._~-]/g

+// Template refs for navigation
+const breadcrumbsRef = ref(null)
+const adminOverviewRef = ref(null)
+const adminOrgDetailRef = ref(null)
+const adminUserDetailRef = ref(null)
+
+// Check if any modal/dialog is open (blocks arrow key navigation)
+const hasActiveModal = computed(() => dialog.value.type !== null || showRegModal.value)
+
+// Derive admin status from permissions
+const isGlobalAdmin = computed(() => info.value?.permissions?.includes('auth:admin') ?? false)
+const isOrgAdmin = computed(() => info.value?.permissions?.includes('auth:org:admin') ?? false)
+
 function sanitizeRenameId() { if (renameIdValue.value) renameIdValue.value = renameIdValue.value.replace(safeIdRegex, '') }

 function handleGlobalClick(e) {
@@ -51,8 +65,8 @@ function handleGlobalClick(e) {
 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 authStore.loadSettings()
+  if (authStore.settings?.rp_name) document.title = authStore.settings.rp_name + ' Admin'
  await load()
 })

@@ -99,35 +113,8 @@ const permissionSummary = computed(() => {
  return display
 })

-function renamePermissionDisplay(p) { openDialog('perm-display', { permission: p, id: p.id, display_name: p.display_name }) }
+function renamePermissionDisplay(p) { openDialog('perm-display', { permission: p, scope: p.scope, display_name: p.display_name, domain: p.domain || '' }) }

-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 })
-    await apiJson(`/auth/api/admin/orgs/${orgUuid}/permission?${params.toString()}`, { method: 'POST' })
-    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 })
-      await apiJson(`/auth/api/admin/orgs/${orgUuid}/permission?${params.toString()}`, { method: 'DELETE' })
-      await loadOrgs()
-    } catch (e) {
-      authStore.showMessage(e.message || 'Failed to remove permission from org')
-    }
-  } })
-}

 function parseHash() {
  const h = window.location.hash || ''
@@ -171,7 +158,7 @@ async function load() {
    // 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 (!isGlobalAdmin.value && isOrgAdmin.value && orgs.value.length === 1) {
      if (!window.location.hash || window.location.hash === '#overview') {
        currentOrgId.value = orgs.value[0].uuid
        window.location.hash = `#org/${currentOrgId.value}`
@@ -198,11 +185,37 @@ 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 }
-  openDialog('confirm', { message: `Delete organization ${org.display_name}?`, action: async () => {
-    await apiJson(`/auth/api/admin/orgs/${org.uuid}`, { method: 'DELETE' })
-    await Promise.all([loadOrgs(), loadPermissions()])
+  if (!isGlobalAdmin.value) { 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)
  } })
 }

@@ -212,7 +225,7 @@ 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',
+      method: 'PATCH',
      body: { role: targetRoleDisplayName }
    })
    await loadOrgs()
@@ -241,37 +254,35 @@ function onRoleDrop(e, org, role) {
  } catch (_) { /* ignore */ }
 }

-// (legacy function retained but unused in UI)
-async function addOrgPermission() { /* obsolete */ }
-
-async function removeOrgPermission() { /* obsolete */ }
-
 // Role actions
 function createRole(org) { openDialog('role-create', { org }) }

 function updateRole(role) { openDialog('role-update', { role, name: role.display_name }) }

 function deleteRole(role) {
-  openDialog('confirm', { message: `Delete role ${role.display_name}?`, action: async () => {
-    await apiJson(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'DELETE' })
-    await loadOrgs()
-  } })
+  // 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
+  // Optimistic update
+  const prevPermissions = [...role.permissions]
  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 }
+    const method = checked ? 'POST' : 'DELETE'
+    await apiJson(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}/permissions/${pid}`, {
+      method
    })
    await loadOrgs()
  } catch (e) {
@@ -281,13 +292,44 @@ async function toggleRolePermission(role, pid, checked) {
 }

 // Permission actions
-function updatePermission(p) { openDialog('perm-display', { permission: p }) }
+async function performPermissionDeletion(permissionScope) {
+  const params = new URLSearchParams({ permission_id: permissionScope })
+  await apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'DELETE' })
+  await loadPermissions()
+}

 function deletePermission(p) {
-  openDialog('confirm', { message: `Delete permission ${p.id}?`, action: async () => {
-    const params = new URLSearchParams({ permission_id: p.id })
-    await apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'DELETE' })
-    await loadPermissions()
+  const userCount = permissionSummary.value[p.uuid]?.userCount || 0
+
+  // Count roles that have this permission
+  let roleCount = 0
+  for (const org of orgs.value) {
+    for (const role of org.roles) {
+      if (role.permissions.includes(p.uuid)) {
+        roleCount++
+      }
+    }
+  }
+
+  if (roleCount === 0) {
+    // No roles have this permission, safe to delete directly
+    performPermissionDeletion(p.scope)
+      .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.scope)
  } })
 }

@@ -361,20 +403,6 @@ function generateUserRegistrationLink(u) {
  showRegModal.value = true
 }

-function onLinkCopied() {
-  authStore.showMessage('Link copied to clipboard!')
-}
-
-function copy(text) {
-  if (!text) return
-  navigator.clipboard.writeText(text)
-    .catch(()=>{})
-}
-
-function permissionDisplayName(id) {
-  return permissions.value.find(p => p.id === id)?.display_name || id
-}
-
 async function toggleOrgPermission(org, permId, checked) {
  // Build next permission list
  const has = org.permissions.includes(permId)
@@ -389,13 +417,112 @@ async function toggleOrgPermission(org, permId, checked) {
    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')
+    authStore.showMessage(e.message || 'Failed to update organization permission', 'error')
    org.permissions = prev // revert
  }
 }

-function openDialog(type, data) { dialog.value = { type, data, busy: false, error: '' } }
-function closeDialog() { dialog.value = { type: null, data: null, busy: false, error: '' } }
+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()
@@ -418,51 +545,151 @@ async function submitDialog() {
    const t = dialog.value.type
    if (t === 'org-create') {
      const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      await apiJson('/auth/api/admin/orgs', { method: 'POST', body: { display_name: name, permissions: [] } })
-      await Promise.all([loadOrgs(), loadPermissions()])
+
+      // 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')
-      await apiJson(`/auth/api/admin/orgs/${org.uuid}`, { method: 'PUT', body: { display_name: name, permissions: org.permissions } })
-      await loadOrgs()
+
+      // Close dialog immediately, then perform async operation
+      closeDialog()
+      apiJson(`/auth/api/admin/orgs/${org.uuid}`, { method: 'PATCH', body: { display_name: name } })
+        .then(() => {
+          authStore.showMessage(`Organization renamed to "${name}".`, 'success', 2500)
+          loadOrgs()
+        })
+        .catch(e => {
+          authStore.showMessage(e.message || 'Failed to update organization', 'error')
+        })
+      return // Don't call closeDialog() again
    } else if (t === 'role-create') {
      const { org } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      await apiJson(`/auth/api/admin/orgs/${org.uuid}/roles`, { method: 'POST', body: { display_name: name, permissions: [] } })
-      await loadOrgs()
+
+      // 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')
-      await apiJson(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'PUT', body: { display_name: name, permissions: role.permissions } })
-      await loadOrgs()
+
+      // Close dialog immediately, then perform async operation
+      closeDialog()
+      apiJson(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'PATCH', body: { display_name: name } })
+        .then(() => {
+          authStore.showMessage(`Role renamed to "${name}".`, 'success', 2500)
+          loadOrgs()
+        })
+        .catch(e => {
+          authStore.showMessage(e.message || 'Failed to update role', 'error')
+        })
+      return // Don't call closeDialog() again
    } else if (t === 'user-create') {
      const { org, role } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      await apiJson(`/auth/api/admin/orgs/${org.uuid}/users`, { method: 'POST', body: { display_name: name, role: role.display_name } })
-      await loadOrgs()
+
+      // 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')
-      await apiJson(`/auth/api/admin/orgs/${user.org_uuid}/users/${user.uuid}/display-name`, { method: 'PUT', body: { display_name: name } })
-      await onUserNameSaved()
+
+      // Close dialog immediately, then perform async operation
+      closeDialog()
+      apiJson(`/auth/api/admin/orgs/${user.org_uuid}/users/${user.uuid}/display-name`, { method: 'PATCH', body: { display_name: name } })
+        .then(() => {
+          authStore.showMessage(`User renamed to "${name}".`, 'success', 2500)
+          onUserNameSaved()
+        })
+        .catch(e => {
+          authStore.showMessage(e.message || 'Failed to update user name', 'error')
+        })
+      return // Don't call closeDialog() again
    } else if (t === 'perm-display') {
      const { permission } = dialog.value.data
-      const newId = dialog.value.data.id?.trim()
+      const newId = dialog.value.data.scope?.trim()
      const newDisplay = dialog.value.data.display_name?.trim()
+      const newDomain = dialog.value.data.domain?.trim() || ''
      if (!newDisplay) throw new Error('Display name required')
-      if (!newId) throw new Error('ID required')
+      if (!newId) throw new Error('Scope required')

-      if (newId !== permission.id) {
-        // ID changed, use rename endpoint
-        await 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 })
-        await apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'PUT' })
+      // Close dialog immediately, then perform async operation
+      closeDialog()
+
+      const oldDomain = permission.domain || ''
+      let apiCall;
+      if (newId !== permission.scope) {
+        // Scope changed, use rename endpoint (also update domain)
+        apiCall = apiJson('/auth/api/admin/permission/rename', { method: 'POST', body: { old_scope: permission.scope, new_scope: newId, display_name: newDisplay, domain: newDomain } })
+      } else if (newDisplay !== permission.display_name || newDomain !== oldDomain) {
+        // Display name or domain changed
+        const params = new URLSearchParams({ permission_id: permission.scope, display_name: newDisplay })
+        if (newDomain) params.set('domain', newDomain)
+        apiCall = apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'PATCH' })
+      } else {
+        // No changes
+        return
      }
-      await loadPermissions()
+
+      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 scope = dialog.value.data.scope?.trim(); if (!scope) throw new Error('Scope required')
      const display_name = dialog.value.data.display_name?.trim(); if (!display_name) throw new Error('Display name required')
-      await apiJson('/auth/api/admin/permissions', { method: 'POST', body: { id, display_name } })
-      await loadPermissions(); dialog.value.data.display_name = ''; dialog.value.data.id = ''
+      const domain = dialog.value.data.domain?.trim() || ''
+
+      // Close dialog immediately, then perform async operation
+      closeDialog()
+      apiJson('/auth/api/admin/permissions', { method: 'POST', body: { scope, display_name, domain: domain || undefined } })
+        .then(() => {
+          authStore.showMessage(`Permission "${display_name}" created.`, 'success', 2500)
+          loadPermissions()
+        })
+        .catch(e => {
+          authStore.showMessage(e.message || 'Failed to create permission', 'error')
+        })
+      return // Don't call closeDialog() again
    } else if (t === 'confirm') {
-      const action = dialog.value.data.action; if (action) await action()
+      const action = dialog.value.data.action
+      // Close dialog first, then perform action (errors shown via showMessage)
+      closeDialog()
+      if (action) {
+        try {
+          await action()
+        } catch (e) {
+          authStore.showMessage(e.message || 'Action failed', 'error')
+        }
+      }
+      return // Already closed
    }
    closeDialog()
  } catch (e) {
@@ -480,21 +707,34 @@ async function submitDialog() {
        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">
+      <!-- Access denied: authenticated but not admin, or error occurred -->
+      <div v-else-if="error || (authenticated && !isGlobalAdmin && !isOrgAdmin)" class="access-denied-container">
+        <div class="access-denied-content">
+          <h2>⛔ Access Denied</h2>
+          <p v-if="error" class="error-detail">{{ error }}</p>
+          <p v-else class="error-detail">You do not have admin permissions for this application.</p>
+          <div class="button-row">
+            <button class="btn-secondary" @click="goBack">Back</button>
+            <button class="btn-primary" @click="reloadPage">Reload Page</button>
+          </div>
+        </div>
+      </div>
+      <section v-else-if="authenticated && (isGlobalAdmin || isOrgAdmin)" class="view-root view-root--wide view-admin">
        <header class="view-header">
          <h1>{{ pageHeading }}</h1>
-          <Breadcrumbs :entries="breadcrumbEntries" />
+          <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">
+            <div class="admin-panels">
                                  <AdminOverview
-                  v-if="!selectedUser && !selectedOrg && (info.is_global_admin || info.is_org_admin)"
+                  v-if="!selectedUser && !selectedOrg && (isGlobalAdmin || isOrgAdmin)"
+                  ref="adminOverviewRef"
                  :info="info"
                  :orgs="orgs"
                  :permissions="permissions"
+                  :navigation-disabled="hasActiveModal"
                  :permission-summary="permissionSummary"
                  @create-org="createOrg"
                  @open-org="openOrg"
@@ -504,15 +744,18 @@ async function submitDialog() {
                  @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"
@@ -520,11 +763,14 @@ async function submitDialog() {
                  @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"
@@ -533,6 +779,7 @@ async function submitDialog() {
                  @open-user="openUser"
                  @toggle-role-permission="toggleRolePermission"
                  @on-role-drag-over="onRoleDragOver"
+                  @navigate-out="handlePanelNavigateOut"
                  @on-role-drop="onRoleDrop"
                  @on-user-drag-start="onUserDragStart"
                />
@@ -545,6 +792,7 @@ async function submitDialog() {
    <AdminDialogs
      :dialog="dialog"
      :permission-id-pattern="PERMISSION_ID_PATTERN"
+      :settings="authStore.settings"
      @submit-dialog="submitDialog"
      @close-dialog="closeDialog"
    />
@@ -557,4 +805,9 @@ async function submitDialog() {
 .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); }
+.access-denied-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; padding: 2rem; }
+.access-denied-content { text-align: center; max-width: 480px; }
+.access-denied-content h2 { margin: 0 0 1rem; color: var(--color-heading); font-size: 1.5rem; }
+.access-denied-content .error-detail { margin: 0 0 1.5rem; color: var(--color-text-muted); }
+.access-denied-content .button-row { display: flex; gap: 0.75rem; justify-content: center; }
 </style>
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -7,6 +7,6 @@
  </head>
  <body>
    <div id="admin-app"></div>
-    <script type="module" src="./main.js"></script>
+    <script type="module" src="/auth/admin/main.js"></script>
  </body>
  </html>
@@ -3,7 +3,9 @@ import '@/assets/style.css'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import AdminApp from './AdminApp.vue'
+import { initKeyboardNavigation } from '@/utils/keynav'

 const app = createApp(AdminApp)
 app.use(createPinia())
 app.mount('#admin-app')
+initKeyboardNavigation()
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,6 +7,6 @@
  </head>
  <body>
    <div id="app"></div>
-    <script type="module" src="main.js"></script>
+    <script type="module" src="/auth/main.js"></script>
  </body>
 </html>
@@ -3,9 +3,11 @@ 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()
@@ -1,4 +1,11 @@
-<html style="background: transparent"><meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<div id="app"></div>
-<script type="module" src="/auth/restricted/main.js"></script>
+<!DOCTYPE html>
+<html lang="en" 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>
@@ -1,5 +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()
@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import App from './RestrictedForward.vue'
 import '@/assets/style.css'
+import { initKeyboardNavigation } from '@/utils/keynav'

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

 createApp(ResetApp).mount('#app')
+initKeyboardNavigation()
@@ -1,34 +1,18 @@
 <script setup>
-import { ref, watch, nextTick } from 'vue'
+import { computed } from 'vue'
 import Modal from '@/components/Modal.vue'
 import NameEditForm from '@/components/NameEditForm.vue'

 const props = defineProps({
  dialog: Object,
-  PERMISSION_ID_PATTERN: String
+  PERMISSION_ID_PATTERN: String,
+  settings: Object
 })

 const emit = defineEmits(['submitDialog', 'closeDialog'])

-const nameInput = ref(null)
-const displayNameInput = ref(null)
-
 const NAME_EDIT_TYPES = new Set(['org-update', 'role-update', 'user-update-name'])
-
-watch(() => props.dialog.type, (newType) => {
-  if (newType === 'org-create') {
-    nextTick(() => {
-      nameInput.value?.focus()
-    })
-  } else if (newType === 'perm-display' || newType === 'perm-create') {
-    nextTick(() => {
-      displayNameInput.value?.focus()
-      if (newType === 'perm-display') {
-        displayNameInput.value?.select()
-      }
-    })
-  }
-})
+const rpId = computed(() => props.settings?.rp_id || 'the configured domain')
 </script>

 <template>
@@ -91,10 +75,14 @@ watch(() => props.dialog.type, (newType) => {
          <label>Display Name
            <input ref="displayNameInput" v-model="dialog.data.display_name" required />
          </label>
-          <label>Permission ID
-            <input v-model="dialog.data.id" :placeholder="dialog.type === 'perm-create' ? 'yourapp:login' : dialog.data.permission.id" required :pattern="PERMISSION_ID_PATTERN" title="Allowed: A-Za-z0-9:._~-" />
+          <label>Permission Scope
+            <input v-model="dialog.data.scope" :placeholder="dialog.type === 'perm-create' ? 'yourapp:permission' : dialog.data.permission.scope" required :pattern="PERMISSION_ID_PATTERN" title="Allowed: A-Za-z0-9:._~-" data-form-type="other" />
          </label>
-          <p class="small muted">The permission ID is used for permission checks in the application. Changing it may break deployed applications that reference this permission.</p>
+          <p class="small muted">E.g. yourapp:reports. Changing the scope name may break deployed applications.</p>
+          <label>Domain Scope
+            <input v-model="dialog.data.domain" placeholder="e.g. app.example.com" data-form-type="other" />
+          </label>
+          <p class="small muted">If set, this permission is effective only on the specified domain, which can be {{ rpId }} or its subdomain.</p>
        </template>
        <template v-else-if="dialog.type==='confirm'">
          <p>{{ dialog.data.message }}</p>
@@ -125,4 +113,5 @@ watch(() => props.dialog.type, (newType) => {
 .error { color: var(--color-danger-text); }
 .small { font-size: 0.9rem; }
 .muted { color: var(--color-text-muted); }
-</style>
+.optional { font-weight: normal; color: var(--color-text-muted); font-size: 0.85em; }
+</style>
@@ -1,12 +1,19 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { getDirection, navigateButtonRow, focusPreferred } from '@/utils/keynav'

 const props = defineProps({
  selectedOrg: Object,
-  permissions: Array
+  permissions: Array,
+  navigationDisabled: { type: Boolean, default: false }
 })

-const emit = defineEmits(['updateOrg', 'createRole', 'updateRole', 'deleteRole', 'createUserInRole', 'openUser', 'toggleRolePermission', 'onRoleDragOver', 'onRoleDrop', 'onUserDragStart'])
+const emit = defineEmits(['updateOrg', 'createRole', 'updateRole', 'deleteRole', 'createUserInRole', 'openUser', 'toggleRolePermission', 'onRoleDragOver', 'onRoleDrop', 'onUserDragStart', 'navigateOut'])
+
+// Template refs for navigation
+const orgTitleRef = ref(null)
+const permMatrixRef = ref(null)
+const rolesGridRef = ref(null)

 const sortedRoles = computed(() => {
  return [...props.selectedOrg.roles].sort((a, b) => {
@@ -19,22 +26,272 @@ const sortedRoles = computed(() => {
  })
 })

-function permissionDisplayName(id) {
-  return props.permissions.find(p => p.id === id)?.display_name || id
+// Get org's grantable permissions as full permission objects (with UUIDs)
+const orgPermissions = computed(() => {
+  const uuidSet = new Set(props.selectedOrg.permissions || [])
+  return props.permissions.filter(p => uuidSet.has(p.uuid))
+})
+
+function permissionDisplayName(scope) {
+  return props.permissions.find(p => p.scope === scope)?.display_name || scope
 }

 function toggleRolePermission(role, pid, checked) {
  emit('toggleRolePermission', role, pid, checked)
 }
+
+// Handle org title header keynav
+function handleTitleKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(orgTitleRef.value, event.target, direction, { itemSelector: 'button' })
+  } else if (direction === 'up') {
+    emit('navigateOut', 'up')
+  } else if (direction === 'down') {
+    // Move to permission matrix
+    const firstCheckbox = permMatrixRef.value?.querySelector('input[type="checkbox"]')
+    if (firstCheckbox) {
+      firstCheckbox.focus()
+    } else {
+      // No matrix, go to roles grid
+      focusFirstRoleElement()
+    }
+  }
+}
+
+// Handle permission matrix grid navigation
+function handleMatrixKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  const target = event.target
+  if (target.tagName !== 'INPUT') return
+
+  event.preventDefault()
+
+  const checkboxes = Array.from(permMatrixRef.value.querySelectorAll('input[type="checkbox"]'))
+  const currentIndex = checkboxes.indexOf(target)
+  if (currentIndex === -1) return
+
+  // Calculate grid dimensions
+  const cols = sortedRoles.value.length
+  const rows = props.selectedOrg.permissions.length
+
+  const currentRow = Math.floor(currentIndex / cols)
+  const currentCol = currentIndex % cols
+
+  let newIndex = currentIndex
+  if (direction === 'left' && currentCol > 0) {
+    newIndex = currentIndex - 1
+  } else if (direction === 'right' && currentCol < cols - 1) {
+    newIndex = currentIndex + 1
+  } else if (direction === 'up' && currentRow > 0) {
+    newIndex = currentIndex - cols
+  } else if (direction === 'down' && currentRow < rows - 1) {
+    newIndex = currentIndex + cols
+  } else if (direction === 'up' && currentRow === 0) {
+    // Navigate up to title
+    const titleButton = orgTitleRef.value?.querySelector('button')
+    if (titleButton) titleButton.focus()
+    return
+  } else if (direction === 'down' && currentRow === rows - 1) {
+    // Navigate down to roles grid
+    focusFirstRoleElement()
+    return
+  }
+
+  if (newIndex !== currentIndex && checkboxes[newIndex]) {
+    checkboxes[newIndex].focus()
+  }
+}
+
+// Handle navigation within user list
+function handleUserListKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  const target = event.target
+  if (!target.classList.contains('user-chip')) return
+
+  const list = target.closest('.user-list')
+  if (!list) return
+
+  const items = Array.from(list.querySelectorAll('.user-chip'))
+  const currentIndex = items.indexOf(target)
+  if (currentIndex === -1) return
+
+  // For vertical navigation within the list
+  if (direction === 'up' && currentIndex > 0) {
+    event.preventDefault()
+    items[currentIndex - 1].focus()
+    return
+  } else if (direction === 'down' && currentIndex < items.length - 1) {
+    event.preventDefault()
+    items[currentIndex + 1].focus()
+    return
+  }
+
+  // Handle boundary navigation
+  if (direction === 'up' && currentIndex === 0) {
+    event.preventDefault()
+    // Go to role header buttons
+    const roleColumn = list.closest('.role-column')
+    const headerButton = roleColumn?.querySelector('.role-header button')
+    if (headerButton) headerButton.focus()
+    return
+  }
+
+  if (direction === 'down' && currentIndex === items.length - 1) {
+    // At bottom - nothing below
+    return
+  }
+
+  // Handle left/right to navigate between role columns
+  if (direction === 'left' || direction === 'right') {
+    event.preventDefault()
+    const roleColumns = Array.from(rolesGridRef.value?.querySelectorAll('.role-column') || [])
+    const currentColumn = list.closest('.role-column')
+    const colIndex = roleColumns.indexOf(currentColumn)
+
+    let targetColIndex = direction === 'left' ? colIndex - 1 : colIndex + 1
+    if (targetColIndex >= 0 && targetColIndex < roleColumns.length) {
+      const targetColumn = roleColumns[targetColIndex]
+      const targetUsers = targetColumn.querySelectorAll('.user-chip')
+      const targetIndex = Math.min(currentIndex, targetUsers.length - 1)
+      if (targetUsers[targetIndex]) {
+        targetUsers[targetIndex].focus()
+      } else {
+        // No users in target column, focus the add user button
+        const addBtn = targetColumn.querySelector('.plus-btn')
+        if (addBtn) addBtn.focus()
+      }
+    } else if (direction === 'left' && colIndex === 0) {
+      // At leftmost column, go up to matrix
+      const lastCheckbox = permMatrixRef.value?.querySelector('input[type="checkbox"]:last-of-type')
+      if (lastCheckbox) lastCheckbox.focus()
+    }
+  }
+}
+
+// Handle role header button navigation
+function handleRoleHeaderKeydown(event, roleIndex) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  const roleColumns = Array.from(rolesGridRef.value?.querySelectorAll('.role-column') || [])
+
+  if (direction === 'left' || direction === 'right') {
+    event.preventDefault()
+    const buttons = event.currentTarget.querySelectorAll('button:not([disabled])')
+    const btnIndex = Array.from(buttons).indexOf(event.target)
+
+    if (direction === 'left' && btnIndex > 0) {
+      buttons[btnIndex - 1].focus()
+    } else if (direction === 'right' && btnIndex < buttons.length - 1) {
+      buttons[btnIndex + 1].focus()
+    } else if (direction === 'left' && btnIndex === 0 && roleIndex > 0) {
+      // Move to previous column's header
+      const prevColumn = roleColumns[roleIndex - 1]
+      const prevButtons = prevColumn?.querySelectorAll('.role-header button')
+      if (prevButtons?.length) prevButtons[prevButtons.length - 1].focus()
+    } else if (direction === 'right' && btnIndex === buttons.length - 1 && roleIndex < roleColumns.length - 1) {
+      // Move to next column's header
+      const nextColumn = roleColumns[roleIndex + 1]
+      const nextButton = nextColumn?.querySelector('.role-header button')
+      if (nextButton) nextButton.focus()
+    }
+  } else if (direction === 'up') {
+    event.preventDefault()
+    // Go to permission matrix
+    const checkboxes = permMatrixRef.value?.querySelectorAll('input[type="checkbox"]')
+    if (checkboxes?.length) {
+      // Focus the checkbox in the corresponding column
+      const cols = sortedRoles.value.length
+      const rows = props.selectedOrg.permissions.length
+      const targetIndex = (rows - 1) * cols + roleIndex
+      if (checkboxes[targetIndex]) checkboxes[targetIndex].focus()
+      else checkboxes[checkboxes.length - 1].focus()
+    } else {
+      const titleButton = orgTitleRef.value?.querySelector('button')
+      if (titleButton) titleButton.focus()
+    }
+  } else if (direction === 'down') {
+    event.preventDefault()
+    // Go to first user in this column
+    const roleColumn = roleColumns[roleIndex]
+    const firstUser = roleColumn?.querySelector('.user-chip')
+    if (firstUser) {
+      firstUser.focus()
+    }
+  }
+}
+
+// Handle empty role section keynav
+function handleEmptyRoleKeydown(event, roleIndex) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  const roleColumns = Array.from(rolesGridRef.value?.querySelectorAll('.role-column') || [])
+
+  if (direction === 'up') {
+    event.preventDefault()
+    const roleColumn = roleColumns[roleIndex]
+    const headerButton = roleColumn?.querySelector('.role-header button')
+    if (headerButton) headerButton.focus()
+  } else if (direction === 'left' && roleIndex > 0) {
+    event.preventDefault()
+    const prevColumn = roleColumns[roleIndex - 1]
+    const prevEmpty = prevColumn?.querySelector('.empty-role button')
+    const prevUser = prevColumn?.querySelector('.user-chip:last-child')
+    if (prevEmpty) prevEmpty.focus()
+    else if (prevUser) prevUser.focus()
+  } else if (direction === 'right' && roleIndex < roleColumns.length - 1) {
+    event.preventDefault()
+    const nextColumn = roleColumns[roleIndex + 1]
+    const nextEmpty = nextColumn?.querySelector('.empty-role button')
+    const nextUser = nextColumn?.querySelector('.user-chip')
+    if (nextEmpty) nextEmpty.focus()
+    else if (nextUser) nextUser.focus()
+  }
+}
+
+// Helper to focus first element in roles grid
+function focusFirstRoleElement() {
+  const firstRoleColumn = rolesGridRef.value?.querySelector('.role-column')
+  const firstButton = firstRoleColumn?.querySelector('.role-header button')
+  if (firstButton) firstButton.focus()
+}
+
+// Focus helper for external navigation
+function focusFirstElement() {
+  const titleButton = orgTitleRef.value?.querySelector('button')
+  if (titleButton) titleButton.focus()
+}
+
+defineExpose({ focusFirstElement })
 </script>

 <template>
-  <h2 class="org-title" :title="selectedOrg.uuid">
+  <h2 class="org-title" ref="orgTitleRef" @keydown="handleTitleKeydown" :title="selectedOrg.uuid">
    <span class="org-name">{{ selectedOrg.display_name }}</span>
    <button @click="$emit('updateOrg', selectedOrg)" class="icon-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
  </h2>

-    <div class="matrix-wrapper">
+    <div class="matrix-wrapper" ref="permMatrixRef" @keydown="handleMatrixKeydown">
      <div class="matrix-scroll">
        <div
          class="perm-matrix-grid"
@@ -49,19 +306,19 @@ function toggleRolePermission(role, pid, checked) {
          >
            <span>{{ r.display_name }}</span>
          </div>
-          <div class="grid-head role-head add-role-head" title="Add role" @click="$emit('createRole', selectedOrg)" role="button">➕</div>
+          <div class="grid-head role-head add-role-head" title="Add role" @click="$emit('createRole', selectedOrg)" role="button" tabindex="0" @keydown.enter="$emit('createRole', selectedOrg)">➕</div>

-          <template v-for="pid in selectedOrg.permissions" :key="pid">
-            <div class="perm-name" :title="pid">{{ permissionDisplayName(pid) }}</div>
+          <template v-for="p in orgPermissions" :key="p.uuid">
+            <div class="perm-name" :title="p.scope">{{ p.display_name }}</div>
            <div
              v-for="r in sortedRoles"
-              :key="r.uuid + '-' + pid"
+              :key="r.uuid + '-' + p.uuid"
              class="matrix-cell"
            >
              <input
                type="checkbox"
-                :checked="r.permissions.includes(pid)"
-                @change="e => toggleRolePermission(r, pid, e.target.checked)"
+                :checked="r.permissions.includes(p.uuid)"
+                @change="e => toggleRolePermission(r, p.uuid, e.target.checked)"
              />
            </div>
            <div class="matrix-cell add-role-cell" />
@@ -70,15 +327,15 @@ function toggleRolePermission(role, pid, checked) {
      </div>
      <p class="matrix-hint muted">Toggle which permissions each role grants.</p>
    </div>
-    <div class="roles-grid">
+    <div class="roles-grid" ref="rolesGridRef">
      <div
-        v-for="r in sortedRoles"
+        v-for="(r, roleIndex) in sortedRoles"
        :key="r.uuid"
        class="role-column"
        @dragover="$emit('onRoleDragOver', $event)"
        @drop="e => $emit('onRoleDrop', e, selectedOrg, r)"
      >
-        <div class="role-header">
+        <div class="role-header" @keydown="e => handleRoleHeaderKeydown(e, roleIndex)">
          <strong class="role-name" :title="r.uuid">
            <span>{{ r.display_name }}</span>
            <button @click="$emit('updateRole', r)" class="icon-btn" aria-label="Edit role" title="Edit role">✏️</button>
@@ -88,7 +345,7 @@ function toggleRolePermission(role, pid, checked) {
          </div>
        </div>
        <template v-if="r.users.length > 0">
-          <ul class="user-list">
+          <ul class="user-list" @keydown="handleUserListKeydown">
            <li
              v-for="u in r.users.slice().sort((a, b) => {
                const nameA = a.display_name.toLowerCase()
@@ -100,9 +357,11 @@ function toggleRolePermission(role, pid, checked) {
              })"
              :key="u.uuid"
              class="user-chip"
+              tabindex="0"
              draggable="true"
              @dragstart="e => $emit('onUserDragStart', e, u, selectedOrg.uuid)"
              @click="$emit('openUser', u)"
+              @keydown.enter="$emit('openUser', u)"
              :title="u.uuid"
            >
              <span class="name">{{ u.display_name }}</span>
@@ -110,7 +369,7 @@ function toggleRolePermission(role, pid, checked) {
            </li>
          </ul>
        </template>
-        <div v-else class="empty-role">
+        <div v-else class="empty-role" @keydown="e => handleEmptyRoleKeydown(e, roleIndex)">
          <p class="empty-text muted">No members</p>
          <button @click="$emit('deleteRole', r)" class="icon-btn delete-icon" aria-label="Delete empty role" title="Delete role">❌</button>
        </div>
@@ -144,6 +403,7 @@ function toggleRolePermission(role, pid, checked) {
 .plus-btn:hover { background: rgba(37, 99, 235, 0.18); }
 .user-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
 .user-chip { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.45rem 0.6rem; display: flex; justify-content: space-between; gap: var(--space-sm); cursor: grab; }
+.user-chip:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
 .user-chip .meta { font-size: 0.7rem; color: var(--color-text-muted); }
 .empty-role { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }
 .empty-text { margin: 0; }
@@ -154,4 +414,4 @@ function toggleRolePermission(role, pid, checked) {
@media (max-width: 720px) {
  .roles-grid { flex-direction: column; }
 }
-</style>
+</style>
@@ -1,23 +1,37 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { getDirection, navigateButtonRow, focusPreferred, focusAtIndex } from '@/utils/keynav'

 const props = defineProps({
  info: Object,
  orgs: Array,
  permissions: Array,
-  permissionSummary: Object
+  permissionSummary: Object,
+  navigationDisabled: { type: Boolean, default: false }
 })

-const emit = defineEmits(['createOrg', 'openOrg', 'updateOrg', 'deleteOrg', 'toggleOrgPermission', 'openDialog', 'deletePermission', 'renamePermissionDisplay'])
+const emit = defineEmits(['createOrg', 'openOrg', 'updateOrg', 'deleteOrg', 'toggleOrgPermission', 'openDialog', 'deletePermission', 'renamePermissionDisplay', 'navigateOut'])
+
+// Template refs for navigation
+const orgSection = ref(null)
+const orgActionsRef = ref(null)
+const orgTableRef = ref(null)
+const permMatrixRef = ref(null)
+const permActionsRef = ref(null)
+const permTableRef = ref(null)

 const sortedOrgs = computed(() => [...props.orgs].sort((a,b)=> {
  const nameCompare = a.display_name.localeCompare(b.display_name)
  return nameCompare !== 0 ? nameCompare : a.uuid.localeCompare(b.uuid)
 }))
-const sortedPermissions = computed(() => [...props.permissions].sort((a,b)=> a.id.localeCompare(b.id)))
+const sortedPermissions = computed(() => [...props.permissions].sort((a,b)=> a.scope.localeCompare(b.scope)))

-function permissionDisplayName(id) {
-  return props.permissions.find(p => p.id === id)?.display_name || id
+// Derive admin status from permissions
+const isGlobalAdmin = computed(() => props.info?.permissions?.includes('auth:admin') ?? false)
+const isOrgAdmin = computed(() => props.info?.permissions?.includes('auth:org:admin') ?? false)
+
+function permissionDisplayName(scope) {
+  return props.permissions.find(p => p.scope === scope)?.display_name || scope
 }

 function getRoleNames(org) {
@@ -27,32 +41,236 @@ function getRoleNames(org) {
    .map(r => r.display_name)
    .join(', ')
 }
+
+// Table navigation for both org and permissions tables
+function handleTableKeydown(event, tableType) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  const target = event.target
+  const row = target.closest('tr')
+  if (!row) return
+
+  const tbody = row.closest('tbody')
+  if (!tbody) return
+
+  const rows = Array.from(tbody.querySelectorAll('tr'))
+  const currentIndex = rows.indexOf(row)
+  if (currentIndex === -1) return
+
+  // Handle left/right navigation within the row
+  if (direction === 'left' || direction === 'right') {
+    event.preventDefault()
+    const focusables = Array.from(row.querySelectorAll('a, button:not([disabled])'))
+    const currentFocusIndex = focusables.indexOf(target)
+    if (currentFocusIndex === -1) return
+
+    if (direction === 'left' && currentFocusIndex > 0) {
+      focusables[currentFocusIndex - 1].focus()
+    } else if (direction === 'right' && currentFocusIndex < focusables.length - 1) {
+      focusables[currentFocusIndex + 1].focus()
+    }
+    return
+  }
+
+  // Handle up/down navigation between rows
+  let newIndex = currentIndex
+  if (direction === 'up' && currentIndex > 0) {
+    newIndex = currentIndex - 1
+  } else if (direction === 'down' && currentIndex < rows.length - 1) {
+    newIndex = currentIndex + 1
+  } else if (direction === 'up' && currentIndex === 0) {
+    // At top of table, navigate to actions above
+    event.preventDefault()
+    if (tableType === 'org') {
+      focusPreferred(orgActionsRef.value, { itemSelector: 'button' })
+    } else if (tableType === 'perm') {
+      focusPreferred(permActionsRef.value, { itemSelector: 'button' })
+    }
+    return
+  } else if (direction === 'down' && currentIndex === rows.length - 1) {
+    // At bottom of org table, navigate to permissions section
+    event.preventDefault()
+    if (tableType === 'org' && isGlobalAdmin.value) {
+      // Navigate to permissions matrix or actions
+      if (permMatrixRef.value) {
+        const firstCheckbox = permMatrixRef.value.querySelector('input[type="checkbox"]')
+        if (firstCheckbox) firstCheckbox.focus()
+        else focusPreferred(permActionsRef.value, { itemSelector: 'button' })
+      }
+    }
+    return
+  }
+
+  if (newIndex !== currentIndex) {
+    event.preventDefault()
+    const newRow = rows[newIndex]
+    const focusable = newRow.querySelector('a, button:not([disabled])')
+    if (focusable) focusable.focus()
+  }
+}
+
+// Handle org actions button keynav
+function handleOrgActionsKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(orgActionsRef.value, event.target, direction, { itemSelector: 'button' })
+  } else if (direction === 'up') {
+    emit('navigateOut', 'up')
+  } else if (direction === 'down') {
+    // Move to org table
+    const firstFocusable = orgTableRef.value?.querySelector('tbody tr a, tbody tr button:not([disabled])')
+    if (firstFocusable) firstFocusable.focus()
+  }
+}
+
+// Handle permission matrix grid navigation
+function handleMatrixKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  const target = event.target
+  if (target.tagName !== 'INPUT') return
+
+  event.preventDefault()
+
+  const checkboxes = Array.from(permMatrixRef.value.querySelectorAll('input[type="checkbox"]'))
+  const currentIndex = checkboxes.indexOf(target)
+  if (currentIndex === -1) return
+
+  // Calculate grid dimensions
+  const cols = sortedOrgs.value.length
+  const rows = sortedPermissions.value.length
+
+  if (cols === 0 || rows === 0) return
+
+  const currentRow = Math.floor(currentIndex / cols)
+  const currentCol = currentIndex % cols
+
+  let newIndex = currentIndex
+  if (direction === 'left') {
+    if (currentCol > 0) {
+      // Move left within the same row
+      newIndex = currentIndex - 1
+    }
+    // At leftmost column, do nothing (no wrap)
+  } else if (direction === 'right') {
+    if (currentCol < cols - 1) {
+      // Move right within the same row
+      newIndex = currentIndex + 1
+    }
+    // At rightmost column, do nothing (no wrap)
+  } else if (direction === 'up') {
+    if (currentRow > 0) {
+      // Move up within the same column
+      newIndex = currentIndex - cols
+    } else {
+      // At top row, navigate up to org table
+      const lastRow = orgTableRef.value?.querySelector('tbody tr:last-child')
+      const focusable = lastRow?.querySelector('a, button:not([disabled])')
+      if (focusable) focusable.focus()
+      return
+    }
+  } else if (direction === 'down') {
+    if (currentRow < rows - 1) {
+      // Move down within the same column
+      newIndex = currentIndex + cols
+    } else {
+      // At bottom row, navigate down to permission actions
+      focusPreferred(permActionsRef.value, { itemSelector: 'button' })
+      return
+    }
+  }
+
+  if (newIndex !== currentIndex && checkboxes[newIndex]) {
+    checkboxes[newIndex].focus()
+  }
+}
+
+// Handle permission actions button keynav
+function handlePermActionsKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(permActionsRef.value, event.target, direction, { itemSelector: 'button' })
+  } else if (direction === 'up') {
+    // Move to first column of last row in matrix
+    const checkboxes = permMatrixRef.value?.querySelectorAll('input[type="checkbox"]')
+    if (checkboxes?.length) {
+      const cols = sortedOrgs.value.length
+      const rows = sortedPermissions.value.length
+      // First checkbox of last row = (rows - 1) * cols
+      const lastRowFirstIndex = (rows - 1) * cols
+      if (checkboxes[lastRowFirstIndex]) {
+        checkboxes[lastRowFirstIndex].focus()
+      } else {
+        checkboxes[0].focus()
+      }
+    } else {
+      // No matrix, go to org table
+      const lastRow = orgTableRef.value?.querySelector('tbody tr:last-child')
+      const focusable = lastRow?.querySelector('a, button:not([disabled])')
+      if (focusable) focusable.focus()
+    }
+  } else if (direction === 'down') {
+    // Move to permissions table
+    const firstFocusable = permTableRef.value?.querySelector('tbody tr button:not([disabled])')
+    if (firstFocusable) firstFocusable.focus()
+  }
+}
+
+// Focus helper for external navigation
+function focusFirstElement() {
+  if (isGlobalAdmin.value) {
+    focusPreferred(orgActionsRef.value, { itemSelector: 'button' })
+  } else {
+    const firstFocusable = orgTableRef.value?.querySelector('tbody tr a, tbody tr button:not([disabled])')
+    if (firstFocusable) firstFocusable.focus()
+  }
+}
+
+defineExpose({ focusFirstElement })
 </script>

 <template>
-  <div class="permissions-section">
-    <h2>{{ info.is_global_admin ? 'Organizations' : 'Your Organizations' }}</h2>
-    <div class="actions">
-      <button v-if="info.is_global_admin" @click="$emit('createOrg')">+ Create Org</button>
+  <div class="permissions-section" ref="orgSection">
+    <h2>{{ isGlobalAdmin ? 'Organizations' : 'Your Organizations' }}</h2>
+    <div class="actions" ref="orgActionsRef" @keydown="handleOrgActionsKeydown">
+      <button v-if="isGlobalAdmin" @click="$emit('createOrg')">+ Create Org</button>
    </div>
-    <table class="org-table">
+    <table class="org-table" ref="orgTableRef" @keydown="e => handleTableKeydown(e, 'org')">
      <thead>
        <tr>
          <th>Name</th>
          <th>Roles</th>
          <th>Members</th>
-          <th v-if="info.is_global_admin">Actions</th>
+          <th v-if="isGlobalAdmin">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="o in sortedOrgs" :key="o.uuid">
          <td>
            <a href="#org/{{o.uuid}}" @click.prevent="$emit('openOrg', o)">{{ o.display_name }}</a>
-            <button v-if="info.is_global_admin || info.is_org_admin" @click="$emit('updateOrg', o)" class="icon-btn edit-org-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
+            <button v-if="isGlobalAdmin || isOrgAdmin" @click="$emit('updateOrg', o)" class="icon-btn edit-org-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
          </td>
          <td class="role-names">{{ getRoleNames(o) }}</td>
          <td class="center">{{ o.roles.reduce((acc,r)=>acc + r.users.length,0) }}</td>
-          <td v-if="info.is_global_admin" class="center">
+          <td v-if="isGlobalAdmin" class="center">
            <button @click="$emit('deleteOrg', o)" class="icon-btn delete-icon" aria-label="Delete organization" title="Delete organization">❌</button>
          </td>
        </tr>
@@ -60,9 +278,9 @@ function getRoleNames(org) {
    </table>
  </div>

-  <div v-if="info.is_global_admin" class="permissions-section">
+  <div v-if="isGlobalAdmin" class="permissions-section">
    <h2>Permissions</h2>
-    <div class="matrix-wrapper">
+    <div class="matrix-wrapper" ref="permMatrixRef" @keydown="handleMatrixKeydown">
      <div class="matrix-scroll">
        <div
          class="perm-matrix-grid"
@@ -78,19 +296,19 @@ function getRoleNames(org) {
            <span>{{ o.display_name }}</span>
          </div>

-          <template v-for="p in sortedPermissions" :key="p.id">
-            <div class="perm-name" :title="p.id">
+          <template v-for="p in sortedPermissions" :key="p.uuid">
+            <div class="perm-name" :title="p.scope">
              <span class="display-text">{{ p.display_name }}</span>
            </div>
            <div
              v-for="o in sortedOrgs"
-              :key="o.uuid + '-' + p.id"
+              :key="o.uuid + '-' + p.uuid"
              class="matrix-cell"
            >
              <input
                type="checkbox"
-                :checked="o.permissions.includes(p.id)"
-                @change="e => $emit('toggleOrgPermission', o, p.id, e.target.checked)"
+                :checked="o.permissions.includes(p.uuid)"
+                @change="e => $emit('toggleOrgPermission', o, p.uuid, e.target.checked)"
              />
            </div>
          </template>
@@ -98,29 +316,31 @@ function getRoleNames(org) {
      </div>
      <p class="matrix-hint muted">Toggle which permissions each organization can grant to its members.</p>
    </div>
-    <div class="actions">
-      <button v-if="info.is_global_admin" @click="$emit('openDialog', 'perm-create', { display_name: '', id: '' })">+ Create Permission</button>
+    <div class="actions" ref="permActionsRef" @keydown="handlePermActionsKeydown">
+      <button v-if="isGlobalAdmin" @click="$emit('openDialog', 'perm-create', { display_name: '', scope: '', domain: '' })">+ Create Permission</button>
    </div>
-    <table class="org-table">
+    <table class="org-table" ref="permTableRef" @keydown="e => handleTableKeydown(e, 'perm')">
        <thead>
          <tr>
            <th scope="col">Permission</th>
+            <th scope="col">Domain</th>
            <th scope="col" class="center">Members</th>
            <th scope="col" class="center">Actions</th>
          </tr>
        </thead>
        <tbody>
-          <tr v-for="p in sortedPermissions" :key="p.id">
+          <tr v-for="p in sortedPermissions" :key="p.uuid">
            <td class="perm-name-cell">
              <div class="perm-title">
                <span class="display-text">{{ p.display_name }}</span>
-                <button @click="$emit('renamePermissionDisplay', p)" class="icon-btn edit-display-btn" aria-label="Edit display name" title="Edit display name">✏️</button>
+                <button @click="$emit('renamePermissionDisplay', p)" class="icon-btn edit-display-btn" aria-label="Edit permission" title="Edit permission">✏️</button>
              </div>
              <div class="perm-id-info">
-                <span class="id-text">{{ p.id }}</span>
+                <span class="id-text">{{ p.scope }}</span>
              </div>
            </td>
-            <td class="perm-members center">{{ permissionSummary[p.id]?.userCount || 0 }}</td>
+            <td class="perm-domain">{{ p.domain || '—' }}</td>
+            <td class="perm-members center">{{ permissionSummary[p.uuid]?.userCount || 0 }}</td>
            <td class="perm-actions center">
              <button @click="$emit('deletePermission', p)" class="icon-btn delete-icon" aria-label="Delete permission" title="Delete permission">❌</button>
            </td>
@@ -141,7 +361,8 @@ function getRoleNames(org) {
 .org-table .role-names { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .perm-name-cell { display: flex; flex-direction: column; gap: 0.3rem; }
 .perm-title { font-weight: 600; color: var(--color-heading); }
-.perm-id-info { font-size: 0.8rem; color: var(--color-text-muted); }
+.perm-id-info { font-size: 0.8rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+.perm-domain { color: var(--color-text-muted); font-size: 0.9rem; }
 .icon-btn { background: none; border: none; color: var(--color-text-muted); padding: 0.2rem; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
 .icon-btn:hover { color: var(--color-heading); background: var(--color-surface-muted); }
 .delete-icon { color: var(--color-danger); }
@@ -162,4 +383,4 @@ function getRoleNames(org) {
 .perm-actions { text-align: center; }
 .center { text-align: center; }
 .muted { color: var(--color-text-muted); }
-</style>
+</style>
@@ -1,29 +1,42 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
 import CredentialList from '@/components/CredentialList.vue'
 import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
 import SessionList from '@/components/SessionList.vue'
 import { useAuthStore } from '@/stores/auth'
 import { apiJson } from '@/utils/api'
+import { getDirection, navigateButtonRow, focusPreferred, focusAtIndex } from '@/utils/keynav'

 const props = defineProps({
  selectedUser: Object,
  userDetail: Object,
  selectedOrg: Object,
  loading: Boolean,
-  showRegModal: Boolean
+  showRegModal: Boolean,
+  navigationDisabled: { type: Boolean, default: false }
 })

-const emit = defineEmits(['generateUserRegistrationLink', 'goOverview', 'openOrg', 'onUserNameSaved', 'closeRegModal', 'editUserName', 'refreshUserDetail'])
+const emit = defineEmits(['generateUserRegistrationLink', 'goOverview', 'openOrg', 'onUserNameSaved', 'closeRegModal', 'editUserName', 'refreshUserDetail', 'navigateOut'])

 const authStore = useAuthStore()
 const terminatingSessions = ref({})
 const hoveredCredentialUuid = ref(null)
 const hoveredSession = ref(null)

+// Template refs for navigation
+const userInfoRef = ref(null)
+const regActionsRef = ref(null)
+const credentialListRef = ref(null)
+const sessionListRef = ref(null)
+const backButtonRef = ref(null)
+
+// Check if any modal/dialog is open (blocks arrow key navigation)
+const hasActiveModal = computed(() => props.showRegModal)
+
 function onLinkCopied() {
-  authStore.showMessage('Link copied to clipboard!')
+  authStore.showMessage(`📋 Link copied! Send it to ${props.selectedUser.display_name}.`)
+  emit('closeRegModal')
 }

 function handleEditName() {
@@ -70,26 +83,114 @@ async function handleTerminateSession(session) {
  }
 }

+// 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">
-    <UserBasicInfo
-      v-if="userDetail && !userDetail.error"
-      :name="userDetail.display_name || selectedUser.display_name"
-      :visits="userDetail.visits"
-      :created-at="userDetail.created_at"
-      :last-seen="userDetail.last_seen"
-      :loading="loading"
-      :org-display-name="userDetail.org.display_name"
-      :role-name="userDetail.role"
-      :update-endpoint="`/auth/api/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/display-name`"
-      @saved="$emit('onUserNameSaved')"
-      @edit-name="handleEditName"
-    />
-    <div v-else-if="userDetail?.error" class="error small">{{ userDetail.error }}</div>
+    <div ref="userInfoRef" @keydown="handleUserInfoKeydown">
+      <UserBasicInfo
+        v-if="userDetail && !userDetail.error"
+        :name="userDetail.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">
+      <div class="registration-actions" ref="regActionsRef" @keydown="handleRegActionsKeydown">
        <button
          class="btn-secondary reg-token-btn"
          @click="$emit('generateUserRegistrationLink', selectedUser)"
@@ -106,27 +207,33 @@ async function handleTerminateSession(session) {
        </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">
+    <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
@@ -2,27 +2,27 @@
 :root {
  --font-sans: "Inter", "Inter var", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "DM Mono", "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-  --color-canvas: #f5f6f8;
-  --color-surface: #ffffff;
-  --color-surface-subtle: #f1f3f7;
-  --color-border: #d0d5dd;
-  --color-border-strong: #9aa2af;
-  --color-heading: #101828;
-  --color-text: #1f2933;
-  --color-text-muted: #52616b;
-  --color-link: #2563eb;
-  --color-link-hover: #1d4ed8;
+  --color-canvas: #ffffff;
+  --color-surface: #eff6ff;
+  --color-surface-subtle: #dbeafe;
+  --color-border: #2563eb;
+  --color-border-strong: #1e40af;
+  --color-heading: #1e3a8a;
+  --color-text: #1e293b;
+  --color-text-muted: #475569;
+  --color-link: #1d4ed8;
+  --color-link-hover: #1e40af;
  --color-accent: #2563eb;
-  --color-accent-strong: #1e3faa;
+  --color-accent-strong: #1e40af;
  --color-accent-contrast: #ffffff;
-  --color-success-text: #0f5132;
-  --color-success-bg: #d1fadf;
-  --color-error-text: #b42318;
-  --color-error-bg: #ffe3e3;
-  --color-info-text: #0f609b;
-  --color-info-bg: #d6ecff;
+  --color-success-text: #166534;
+  --color-success-bg: #dcfce7;
+  --color-error-text: #b91c1c;
+  --color-error-bg: #fee2e2;
+  --color-info-text: #1e40af;
+  --color-info-bg: #dbeafe;
  --color-danger: #dc2626;
-  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
+  --shadow-soft: 0 10px 30px rgba(30, 64, 175, 0.15);
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
@@ -34,9 +34,9 @@
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;
  --space-xxl: 3.5rem;
-  --layout-max-width: 1400px;
  --layout-padding: clamp(1.5rem, 3vw + 1rem, 3.25rem);
  --transition-base: 160ms ease;
+  --focus-ring: 0 0 0 2px var(--color-accent);
 }

@media (prefers-color-scheme: dark) {
@@ -46,7 +46,7 @@
    --color-surface-subtle: #1b243b;
    --color-border: #25304a;
    --color-border-strong: #3d4d6b;
-    --color-heading: #f8fafc;
+    --color-heading: #fff;
    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-link: #60a5fa;
@@ -72,11 +72,15 @@
 }

 html {
+  overflow: clip;
  height: 100%;
  background: var(--color-canvas);
 }

 body {
+  color-scheme: light dark;
+  overflow: auto;
+  scrollbar-gutter: stable;
  height: 100%;
  margin: 0;
  font-family: var(--font-sans);
@@ -84,6 +88,10 @@ body {
  color: var(--color-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
+  text-align: justify;
+  hyphens: auto;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
 }

 body,
@@ -108,13 +116,6 @@ a:visited {
 a:hover,
 a:focus-visible {
  color: var(--color-link-hover);
-  text-decoration: underline;
-}
-
-a:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-  border-radius: var(--radius-sm);
 }

 .app-shell {
@@ -139,7 +140,6 @@ a:focus-visible {
  padding: var(--layout-padding);
  box-sizing: border-box;
  margin: 0 auto;
-  width: min(100%, var(--layout-max-width));
 }

 .view-root--wide {
@@ -187,13 +187,22 @@ a:focus-visible {
  gap: 1rem;
 }

+.section-description {
+  margin: 0;
+  color: var(--color-text-muted);
+}
+
 .button-row {
  display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
  gap: 0.75rem;
  justify-content: flex-start;
 }

+.button-row button {
+  min-width: 0;
+}
+
 .surface {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
@@ -214,7 +223,6 @@ button {
  border: 1px solid transparent;
  padding: 0.65rem 1.1rem;
  cursor: pointer;
-  transition: all var(--transition-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
@@ -223,11 +231,6 @@ button {
  color: var(--color-text);
 }

-button:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-
 button:disabled {
  cursor: not-allowed;
  filter: opacity(0.6);
@@ -266,6 +269,13 @@ button:disabled {
  filter: brightness(0.92);
 }

+/* Focus-visible outlines for buttons */
+.btn-primary:focus-visible,
+.btn-secondary:focus-visible,
+.btn-danger:focus-visible {
+  outline: 1px solid var(-webkit-focus-ring-color);
+}
+
 input[type="text"],
 input[type="search"],
 input[type="email"],
@@ -281,14 +291,6 @@ select {
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
 }

-input:focus-visible,
-textarea:focus-visible,
-select:focus-visible {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px #c7d2fe;
-  outline: none;
-}
-
 label {
  display: flex;
  flex-direction: column;
@@ -348,10 +350,13 @@ th {
 .global-status {
  position: fixed;
  top: 1.5rem;
-  left: 50%;
-  transform: translateX(-50%);
+  left: 0;
+  right: 0;
+  margin: 0 auto;
  z-index: 1200;
-  min-width: min(520px, calc(100vw - 2rem));
+  width: fit-content;
+  min-width: min(520px, calc(100% - 2rem));
+  max-width: calc(100% - 2rem);
  display: none;
 }

@@ -388,10 +393,11 @@ th {

 .dialog-overlay {
  position: fixed;
-  inset: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
  background: transparent;
-  backdrop-filter: blur(.1rem) brightness(0.7);
-  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
  z-index: 1100;
  display: flex;
  align-items: center;
@@ -437,7 +443,7 @@ th {
  color: var(--color-text);
 }

-:root { --card-width: 22rem; }
+:root { --card-width: 16rem; }

 .record-list,
 .credential-list,
@@ -447,9 +453,10 @@ th {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
  justify-content: start;
-  gap: 1rem 1.25rem;
+  gap: 0.5rem;
  align-items: stretch;
  margin: 0 auto;
+  outline: none;
 }

@media (max-width: 720px) {
@@ -461,9 +468,7 @@ th {
 .session-item {
  display: flex;
  flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem;
-  border: 1px solid var(--color-border);
+  padding: 0.5rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  height: 100%;
@@ -484,15 +489,20 @@ th {
 .credential-item.current-session,
 .credential-item.is-hovered,
 .session-item.is-current,
-.session-item.is-hovered { border-color: var(--color-accent); }
+.session-item.is-hovered { border-color: var(--color-accent); background-color: var(--color-surface-subtle); }

 .credential-item.is-linked-session,
 .session-item.is-linked-credential { border-color: var(--color-accent); background-color: var(--color-surface-subtle); }

+.credential-item:focus,
+.session-item:focus {
+  outline: 1px solid var(-webkit-focus-ring-color);
+}
+
 .item-top {
  display: flex;
  align-items: center;
-  gap: 1rem;
+  height: 2.5rem;
 }

 .item-icon {
@@ -500,9 +510,6 @@ th {
  height: 40px;
  display: grid;
  place-items: center;
-  background: var(--color-surface-subtle, transparent);
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-border);
  flex-shrink: 0;
 }

@@ -510,18 +517,22 @@ th {
  border-radius: var(--radius-sm);
 }

+.icon { flex: 0 0 auto; font-size: 1.5em; width: 40px; }
+
 .item-title {
  flex: 1;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-heading);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .item-actions {
  flex-shrink: 0;
  display: flex;
-  gap: 0.5rem;
  align-items: center;
 }

@@ -529,39 +540,30 @@ th {
 .item-actions .badge + .badge { margin-left: 0.25rem; }

 .item-details {
-  margin-left: calc(40px + 1rem);
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.credential-dates {
-  display: grid;
-  grid-auto-flow: row;
-  grid-template-columns: 7rem 1fr;
-  gap: 0.35rem 0.5rem;
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  align-items: center;
+  margin-left: 40px;
 }

+.credential-dates,
 .session-dates {
  display: grid;
  grid-auto-flow: row;
-  grid-template-columns: 7rem 1fr;
-  gap: 0.35rem 0.5rem;
+  grid-template-columns: 8em 1fr;
  font-size: 0.75rem;
-  color: var(--color-text-muted);
  align-items: center;
 }

 .date-label {
  font-weight: 500;
-  color: inherit;
+  color: var(--color-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .date-value {
  color: var(--color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .btn-card-delete { background: transparent; border: none; color: var(--color-danger); padding: 0.35rem 0.5rem; font-size: 1.05rem; line-height: 1; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
@@ -572,12 +574,43 @@ th {
 .session-emoji {
  font-size: 1.2rem;
 }
+.session-group {
+  position: relative;
+}
+.session-group:focus-visible {
+  outline: 1px solid var(-webkit-focus-ring-color);
+}
+.session-group-host {
+  display: flex;
+  align-items: center;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0.5rem 0;
+}
+.session-group-icon {
+  margin-left: -1.5rem;
+}
+.session-group-host a {
+  color: var(--color-text);
+  text-decoration: none;
+}
+.session-group:focus-visible .session-group-host,
+.session-group:focus-visible .session-group-host a {
+  color: var(--color-heading);
+}
+.btn-card-delete {
+  display: none;
+}
+.session-item:focus .btn-card-delete {
+  display: block;
+}

 .badge {
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
+  white-space: nowrap;
 }

 .badge-current {
@@ -610,28 +643,18 @@ th {
 }

 .user-info {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  padding: 1.1rem 1.25rem;
  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 0.75rem 1.25rem;
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  padding: 1.1rem 1.25rem;
 }

-.user-info h3 {
-  margin: 0;
-  grid-column: span 2;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 1.15rem;
-  font-weight: 600;
-}
-
-.user-info span {
-  text-align: left;
-  color: var(--color-text);
+.user-details {
+  display: grid;
+  grid-template-columns: 7em 1fr;
+  gap: 0 0.5rem;
+  padding-left: 40px;
+  font-size: 0.75rem;
 }

 .toggle-link {
@@ -653,25 +676,13 @@ th {
    gap: 1.75rem;
  }

-  .credential-dates {
-    grid-auto-flow: row;
-    grid-template-columns: auto auto;
-  }
-
  .global-status {
    top: 1rem;
  }
 }

-/* Mobile portrait (touch) or very narrow screens: stack buttons */
+/* Mobile portrait (touch) or very narrow screens */
@media (max-width: 500px) and (orientation: portrait) and (pointer: coarse), (max-width: 350px) {
-  button {
-    width: 100%;
-  }
-
-  .button-row {
-    flex-direction: column;
-  }
 }

 .dialog-backdrop {
@@ -720,9 +731,28 @@ th {
  }
 }

-/* Auth iframe overlay styles */
-body:has(#auth-iframe) {
-  overflow: hidden;
+/* Global backdrop controlled by api.js ref-counting */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 1099;
+  background: transparent;
+  backdrop-filter: blur(0) brightness(1);
+  -webkit-backdrop-filter: blur(0) brightness(1);
+  pointer-events: none;
+  visibility: hidden;
+  transition: all 0.2s ease-out;
+}
+
+body.has-backdrop::before {
+  -webkit-backdrop-filter: blur(.2rem) brightness(0.5);
+  backdrop-filter: blur(.2rem) brightness(0.5);
+  visibility: visible;
+}
+
+body.has-backdrop {
+  overflow: auto;
 }

 #auth-iframe {
@@ -735,6 +765,28 @@ body:has(#auth-iframe) {
  z-index: 9999;
  color-scheme: auto;
  background: transparent;
-  backdrop-filter: blur(.1rem) brightness(0.7);
-  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
+}
+
+.slot-machine {
+  padding: 0.875rem 1rem;
+  background: var(--color-surface-hover, rgba(0, 0, 0, 0.03));
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.slot-reel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-width: 0;
+  height: 1.8em;
+  position: relative;
 }
@@ -1,5 +1,6 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref, onMounted, watch } from 'vue'
+import { getDirection, navigateButtonRow } from '@/utils/keynav'

 // Props:
 // entries: Array<{ label:string, href:string }>
@@ -11,17 +12,78 @@ const props = defineProps({
  homeHref: { type: String, default: '/' }
 })

+const navRef = ref(null)
+
 const crumbs = computed(() => {
-  const base = props.showHome ? [{ label: '🏠', href: props.homeHref }] : []
-  return [...base, ...props.entries]
+  if (props.showHome && props.entries.length > 0 && props.entries[0].href === props.homeHref) {
+    // Combine home and first entry if they have the same href
+    const combined = { label: '🏠 ' + props.entries[0].label, href: props.homeHref }
+    return [combined, ...props.entries.slice(1)]
+  } else {
+    const base = props.showHome ? [{ label: '🏠', href: props.homeHref }] : []
+    return [...base, ...props.entries]
+  }
 })
+
+// Find the index of the crumb matching current location
+const currentIndex = computed(() => {
+  const currentHref = window.location.hash || window.location.pathname
+  for (let i = crumbs.value.length - 1; i >= 0; i--) {
+    const href = crumbs.value[i].href
+    if (href === currentHref || (href && currentHref.startsWith(href))) {
+      return i
+    }
+  }
+  return crumbs.value.length - 1 // Default to last crumb
+})
+
+function handleFocusIn(event) {
+  // When the nav receives focus, focus the current page's crumb
+  if (event.target === navRef.value) {
+    const links = navRef.value.querySelectorAll('a')
+    const targetIndex = Math.min(currentIndex.value, links.length - 1)
+    if (links[targetIndex]) {
+      links[targetIndex].focus()
+    }
+  }
+}
+
+function handleKeydown(event) {
+  const direction = getDirection(event)
+  if (!direction) return
+
+  if (direction === 'left' || direction === 'right') {
+    event.preventDefault()
+    navigateButtonRow(navRef.value, event.target, direction, { itemSelector: 'a' })
+  }
+  // Up/down are handled by parent component
+}
+
+// Expose method to focus the current crumb from parent
+function focusCurrent() {
+  const links = navRef.value?.querySelectorAll('a')
+  if (links?.length) {
+    const targetIndex = Math.min(currentIndex.value, links.length - 1)
+    links[targetIndex]?.focus()
+  }
+}
+
+defineExpose({ focusCurrent })
 </script>

 <template>
-  <nav class="breadcrumbs" aria-label="Breadcrumb" v-if="crumbs.length">
+  <nav
+    ref="navRef"
+    class="breadcrumbs"
+    aria-label="Breadcrumb"
+    v-if="crumbs.length > 1"
+    tabindex="0"
+    @focusin="handleFocusIn"
+    @keydown="handleKeydown"
+  >
    <ol>
      <li v-for="(c, idx) in crumbs" :key="idx">
-        <a :href="c.href">{{ c.label }}</a>
+        <a :href="c.href" tabindex="-1">{{ c.label }}</a>
        <span v-if="idx < crumbs.length - 1" class="sep"> — </span>
      </li>
    </ol>
@@ -33,6 +95,5 @@ const crumbs = computed(() => {
 .breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
 .breadcrumbs li { display: inline-flex; align-items: center; gap: .25rem; font-size: .9rem; }
 .breadcrumbs a { text-decoration: none; color: var(--color-link); padding: 0 .25rem; border-radius:4px; transition: color 0.2s ease, background 0.2s ease; }
-.breadcrumbs a:hover, .breadcrumbs a:focus-visible { text-decoration: underline; color: var(--color-link-hover); outline: none; }
 .breadcrumbs .sep { color: var(--color-text-muted); margin: 0; }
 </style>
@@ -1,5 +1,5 @@
 <template>
-  <div class="credential-list">
+  <div class="credential-list" tabindex="0" @focusin="handleListFocus" @keydown="handleListKeydown">
    <div v-if="loading"><p>Loading credentials...</p></div>
    <div v-else-if="!credentials?.length"><p>No passkeys found.</p></div>
    <template v-else>
@@ -11,9 +11,12 @@
          'is-hovered': hoveredCredentialUuid === credential.credential_uuid,
          'is-linked-session': hoveredSessionCredentialUuid === credential.credential_uuid
        }]"
-        tabindex="0"
+        tabindex="-1"
+        @mousedown.prevent
+        @click.capture="handleCardClick"
        @focusin="handleCredentialFocus(credential.credential_uuid)"
        @focusout="handleCredentialBlur($event)"
+        @keydown="handleItemKeydown($event, credential)"
      >
        <div class="item-top">
          <div class="item-icon">
@@ -37,8 +40,9 @@
              @click="$emit('delete', credential)"
              class="btn-card-delete"
              :disabled="credential.is_current_session"
-              :title="credential.is_current_session ? 'Cannot delete current session credential' : 'Delete passkey'"
-            >🗑️</button>
+              :title="credential.is_current_session ? 'Cannot delete current session credential' : 'Delete passkey and terminate any linked sessions.'"
+              tabindex="-1"
+            >❌</button>
          </div>
        </div>
        <div class="item-details">
@@ -57,8 +61,8 @@
 </template>

 <script setup>
-import { computed, ref } from 'vue'
 import { formatDate } from '@/utils/helpers'
+import { navigateGrid, handleEscape, handleDeleteKey, getDirection } from '@/utils/keynav'

 const props = defineProps({
  credentials: { type: Array, default: () => [] },
@@ -67,9 +71,10 @@ const props = defineProps({
  allowDelete: { type: Boolean, default: false },
  hoveredCredentialUuid: { type: String, default: null },
  hoveredSessionCredentialUuid: { type: String, default: null },
+  navigationDisabled: { type: Boolean, default: false },
 })

-const emit = defineEmits(['delete', 'credentialHover'])
+const emit = defineEmits(['delete', 'credentialHover', 'navigate-out'])

 const handleCredentialFocus = (uuid) => {
  emit('credentialHover', uuid)
@@ -82,6 +87,58 @@ const handleCredentialBlur = (event) => {
  }
 }

+const handleCardClick = (event) => {
+  if (!event.currentTarget.matches(':focus')) {
+    event.currentTarget.focus()
+    event.stopPropagation()
+  }
+}
+
+const handleDelete = (event, credential) => {
+  handleDeleteKey(event, () => {
+    if (props.allowDelete && !credential.is_current_session) emit('delete', credential)
+  })
+}
+
+const handleListFocus = (event) => {
+  if (props.navigationDisabled) return
+
+  const list = event.currentTarget
+  // If focus came to the list container itself (not a child), focus first item
+  if (event.target === list) {
+    const firstItem = list.querySelector('.credential-item')
+    if (firstItem) {
+      firstItem.focus()
+    }
+  }
+}
+
+const handleListKeydown = (event) => {
+  if (props.navigationDisabled) return
+
+  // Escape emits navigate-out
+  handleEscape(event, (dir) => emit('navigate-out', dir))
+}
+
+const handleItemKeydown = (event, credential) => {
+  // Handle delete (always allowed even with modal)
+  handleDelete(event, credential)
+  if (event.defaultPrevented) return
+
+  if (props.navigationDisabled) return
+
+  // Arrow key navigation
+  const direction = getDirection(event)
+  if (direction) {
+    event.preventDefault()
+    const list = event.currentTarget.closest('.credential-list')
+    const result = navigateGrid(list, event.currentTarget, direction, { itemSelector: '.credential-item' })
+    if (result === 'boundary') {
+      emit('navigate-out', direction)
+    }
+  }
+}
+
 const getCredentialAuthName = (credential) => {
  const info = props.aaguidInfo?.[credential.aaguid]
  return info ? info.name : 'Unknown Authenticator'
@@ -95,3 +152,12 @@ const getCredentialAuthIcon = (credential) => {
  return info[iconKey] || null
 }
 </script>
+
+<style>
+.btn-card-delete {
+  display: none;
+}
+.credential-item:focus .btn-card-delete {
+  display: block;
+}
+</style>
@@ -1,67 +0,0 @@
-<template>
-  <section class="view-root view-root--narrow view-device-link">
-    <header class="view-header">
-      <h1>📱 Add Another Device</h1>
-      <p class="view-lede">Generate a one-time link to set up passkeys on a new device.</p>
-    </header>
-    <div class="button-row" style="margin-top:1rem;">
-      <button @click="showModal = true" class="btn-primary">Generate Registration Link</button>
-      <button @click="authStore.currentView = 'profile'" class="btn-secondary">Back to Profile</button>
-    </div>
-    <RegistrationLinkModal
-      v-if="showModal"
-      endpoint="/auth/api/user/create-link"
-      :user-name="userName"
-      @close="showModal = false"
-      @copied="onCopied"
-    />
-  </section>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { useAuthStore } from '@/stores/auth'
-import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
-
-const authStore = useAuthStore()
-const userName = ref(null)
-const showModal = ref(false)
-
-const onCopied = () => {
-  authStore.showMessage('Link copied to clipboard!', 'success', 2500)
-}
-
-onMounted(async () => {
-  // Extract optional admin-provided query parameters (?user=Name&emoji=😀)
-  const params = new URLSearchParams(location.search)
-  const qUser = params.get('user')
-  if (qUser) userName.value = qUser.trim()
-})
-
-</script>
-
-<style scoped>
-.view-lede {
-  margin: 0;
-  color: var(--color-text-muted);
-}
-
-.qr-link {
-  text-decoration: none;
-  color: var(--color-text);
-}
-
-.button-row {
-  justify-content: flex-start;
-}
-
-@media (max-width: 720px) {
-  .button-row {
-    flex-direction: column;
-  }
-
-  .button-row button {
-    width: 100%;
-  }
-}
-</style>
@@ -5,7 +5,7 @@
      <p class="view-lede">{{ subheading }}</p>
    </header>

-    <section class="section-block">
+    <section class="section-block" ref="userInfoSection">
      <div class="section-body">
        <UserBasicInfo
          v-if="user"
@@ -25,7 +25,7 @@

    <section class="section-block">
      <div class="section-body host-actions">
-        <div class="button-row">
+        <div class="button-row" ref="buttonRow" @keydown="handleButtonRowKeydown">
          <button
            type="button"
            class="btn-secondary"
@@ -58,10 +58,11 @@
 </template>

 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
 import { useAuthStore } from '@/stores/auth'
 import { goBack } from '@/utils/helpers'
+import { getDirection, navigateButtonRow } from '@/utils/keynav'

 defineProps({
  initializing: {
@@ -73,6 +74,10 @@ defineProps({
 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 || '')
@@ -105,17 +110,27 @@ const goToAuthSite = () => {
 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: 0 0 auto; }
+.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); }
-@media (max-width: 600px) {
-  .host-actions .button-row { flex-direction: column; }
-  .host-actions .button-row button { width: 100%; }
-}
 </style>
@@ -1,32 +1,143 @@
 <template>
-  <div class="modal-overlay" @keydown.esc="$emit('close')" tabindex="-1">
-    <div class="modal" role="dialog" aria-modal="true">
-      <slot />
-    </div>
-  </div>
+  <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>
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: transparent;
-  backdrop-filter: blur(.1rem) brightness(0.7);
-  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal {
+dialog {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
@@ -36,37 +147,47 @@ defineEmits(['close'])
  width: min(500px, 90vw);
  max-height: 90vh;
  overflow-y: auto;
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  height: fit-content;
 }

-.modal :deep(.modal-title),
-.modal :deep(h3) {
+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);
 }

-.modal :deep(form) {
+dialog :deep(form) {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
 }

-.modal :deep(.modal-form) {
+dialog :deep(.modal-form) {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
 }

-.modal :deep(.modal-form label) {
+dialog :deep(.modal-form label) {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-weight: 500;
 }

-.modal :deep(.modal-form input),
-.modal :deep(.modal-form textarea) {
+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);
@@ -77,14 +198,14 @@ defineEmits(['close'])
  min-height: 2.5rem;
 }

-.modal :deep(.modal-form input:focus),
-.modal :deep(.modal-form textarea:focus) {
+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;
 }

-.modal :deep(.modal-actions) {
+dialog :deep(.modal-actions) {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
@@ -12,7 +12,7 @@
      />
    </label>
    <div v-if="error" class="error small">{{ error }}</div>
-    <div class="modal-actions">
+    <div class="modal-actions" @keydown="handleActionsKeydown">
      <button
        type="button"
        class="btn-secondary"
@@ -25,6 +25,7 @@
        type="submit"
        class="btn-primary"
        :disabled="busy"
+        data-nav-primary
      >
        {{ submitText }}
      </button>
@@ -33,7 +34,8 @@
 </template>

 <script setup>
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
+import { getDirection } from '@/utils/keynav'

 const props = defineProps({
  modelValue: { type: String, default: '' },
@@ -60,16 +62,15 @@ const localValue = computed({

 const resolvedInputId = computed(() => props.inputId || generatedId)

-onMounted(() => {
-  if (!props.autoFocus) return
-  nextTick(() => {
-    if (props.autoSelect) {
-      inputRef.value?.select()
-    } else {
-      inputRef.value?.focus()
-    }
-  })
-})
+const handleActionsKeydown = (event) => {
+  const direction = getDirection(event)
+  if (direction === 'up') {
+    event.preventDefault()
+    inputRef.value?.focus()
+    return
+  }
+  // Left/right navigation is handled globally by keynav
+}

 function handleCancel() {
  emit('cancel')
@@ -2,13 +2,14 @@
  <section class="view-root" data-view="profile">
    <header class="view-header">
      <h1>User Profile</h1>
-      <Breadcrumbs :entries="breadcrumbEntries" />
+      <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">
+    <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"
@@ -17,52 +18,59 @@
        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 from remote device:</label>
-          <RemoteAuth
+          <label v-if="!showDeviceInfo" class="remote-auth-label">Code words:</label>
+          <RemoteAuthPermit
            ref="pairingEntry"
            title=""
            description=""
-            placeholder="word word word"
            @completed="handlePairingCompleted"
            @error="handlePairingError"
            @device-info-visible="showDeviceInfo = $event"
          />
        </div>
+        <p class="remote-auth-description">Provided by another device requesting remote auth.</p>
      </UserBasicInfo>
    </section>

    <section class="section-block">
      <div class="section-header">
        <h2>Your Passkeys</h2>
-        <p class="section-description">Keep at least one trusted passkey so you can always sign in.</p>
+        <p class="section-description">Ideally have at least two passkeys in case you lose one. More than one user can be registered on the same device, giving you a choice at login. <a href="https://bitwarden.com/pricing/" target="_blank" rel="noopener noreferrer">Bitwarden</a> can sync one passkey to all your devices. Other secure options include <b>local passkeys</b>, as well as hardware keys such as <a href="https://www.yubico.com" target="_blank" rel="noopener noreferrer">YubiKey</a>. Cloud sync via Google, Microsoft or iCloud is discouraged.</p>
      </div>
      <div class="section-body">
        <CredentialList
+          ref="credentialList"
          :credentials="authStore.userInfo?.credentials || []"
          :aaguid-info="authStore.userInfo?.aaguid_info || {}"
          :loading="authStore.isLoading"
          :hovered-credential-uuid="hoveredCredentialUuid"
          :hovered-session-credential-uuid="hoveredSession?.credential_uuid"
+          :navigation-disabled="hasActiveModal"
          allow-delete
          @delete="handleDelete"
          @credential-hover="hoveredCredentialUuid = $event"
+          @navigate-out="handleCredentialNavigateOut"
        />
-        <div class="button-row">
-          <button @click="addNewCredential" class="btn-primary">Add New Passkey</button>
-          <button @click="showRegLink = true" class="btn-secondary">Add Another Device</button>
+        <div class="button-row" ref="credentialButtons">
+          <button @click="addNewCredential" class="btn-primary" @keydown="handleCredentialButtonKeydown">Register New</button>
+          <button @click="showRegLink = true" class="btn-secondary" @keydown="handleCredentialButtonKeydown">Another Device</button>
        </div>
      </div>
    </section>

    <SessionList
+      ref="sessionList"
      :sessions="sessions"
      :terminating-sessions="terminatingSessions"
      :hovered-credential-uuid="hoveredCredentialUuid"
+      :navigation-disabled="hasActiveModal"
      @terminate="terminateSession"
      @session-hover="hoveredSession = $event"
-      section-description="Review where you're signed in and end any sessions you no longer recognize."
+      @navigate-out="handleSessionNavigateOut"
+      section-description="You are currently signed in to the following sessions. If you don't recognize something, consider deleting not only the session but the associated passkey you suspect is compromised, as only this terminates all linked sessions and prevents logging in again."
    />

    <Modal v-if="showNameDialog" @close="showNameDialog = false">
@@ -78,18 +86,19 @@
    </Modal>

    <section class="section-block">
-      <div class="button-row logout-row" :class="{ single: !hasMultipleSessions }">
+      <div class="button-row" ref="logoutButtons">
        <button
          type="button"
          class="btn-secondary"
          @click="goBack"
+          @keydown="handleLogoutButtonKeydown"
        >
          Back
        </button>
-        <button v-if="!hasMultipleSessions" @click="logoutEverywhere" class="btn-danger logout-button" :disabled="authStore.isLoading">Logout</button>
+        <button v-if="!hasMultipleSessions" @click="logoutEverywhere" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">Logout</button>
        <template v-else>
-          <button @click="logout" class="btn-danger logout-button" :disabled="authStore.isLoading">Logout</button>
-          <button @click="logoutEverywhere" class="btn-danger logout-button" :disabled="authStore.isLoading">All</button>
+          <button @click="logout" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">Logout</button>
+          <button @click="logoutEverywhere" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">All</button>
        </template>
      </div>
      <p class="logout-note" v-if="!hasMultipleSessions"><strong>Logout</strong> from {{ currentSessionHost }}.</p>
@@ -99,6 +108,7 @@
      v-if="showRegLink"
      endpoint="/auth/api/user/create-link"
      @close="showRegLink = false"
+      @copied="onLinkCopied"
    />
  </section>
 </template>
@@ -112,12 +122,13 @@ import Modal from '@/components/Modal.vue'
 import NameEditForm from '@/components/NameEditForm.vue'
 import SessionList from '@/components/SessionList.vue'
 import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
-import RemoteAuth from '@/components/RemoteAuthPermit.vue'
+import RemoteAuthPermit from '@/components/RemoteAuthPermit.vue'
 import { useAuthStore } from '@/stores/auth'
 import { adminUiPath, makeUiHref } from '@/utils/settings'
 import passkey from '@/utils/passkey'
 import { goBack } from '@/utils/helpers'
 import { apiJson } from '@/utils/api'
+import { navigateButtonRow, focusPreferred, focusAtIndex, getDirection } from '@/utils/keynav'

 const authStore = useAuthStore()
 const updateInterval = ref(null)
@@ -129,6 +140,16 @@ 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 || '' })

@@ -164,13 +185,118 @@ const handlePairingError = (message) => {
  }
 }

+const onLinkCopied = () => {
+  authStore.showMessage('📋 Link copied! Send it to your other device.')
+  showRegLink.value = false
+}
+
+// Helper to focus preferred button in a row (primary first, or first button)
+const focusPreferredButton = (container) => {
+  focusPreferred(container, { primarySelector: '.btn-primary', itemSelector: 'button' })
+}
+
+// Navigation between components
+const handleBreadcrumbKeydown = (event) => {
+  if (hasActiveModal.value) return  // Block navigation when modal is open
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  // Left/right handled internally by Breadcrumbs component
+  if (direction === 'down') {
+    event.preventDefault()
+    // Move to user info section - always focus edit button first
+    focusPreferred(userInfoSection.value, { primarySelector: '.mini-btn', itemSelector: '.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
-  if (!confirm('Are you sure you want to delete this passkey?')) return
  try {
    await authStore.deleteCredential(credentialId)
-    authStore.showMessage('Passkey deleted successfully!', 'success', 3000)
+    authStore.showMessage('Passkey deleted! You should also remove it from your password manager or device.', 'success', 3000)
  } catch (error) { authStore.showMessage(`Failed to delete passkey: ${error.message}`, 'error') }
 }

@@ -198,7 +324,10 @@ const terminateSession = async (session) => {
 const logoutEverywhere = async () => { await authStore.logoutEverywhere() }
 const logout = async () => { await authStore.logout() }
 const openNameDialog = () => { newName.value = authStore.userInfo?.user?.user_name || ''; showNameDialog.value = true }
-const isAdmin = computed(() => !!(authStore.userInfo?.is_global_admin || authStore.userInfo?.is_org_admin))
+const isAdmin = computed(() => {
+  const perms = authStore.userInfo?.permissions ?? []
+  return perms.includes('auth:admin') || perms.includes('auth:org:admin')
+})
 const hasMultipleSessions = computed(() => sessions.value.length > 1)
 const breadcrumbEntries = computed(() => { const entries = [{ label: 'Auth', href: makeUiHref() }]; if (isAdmin.value) entries.push({ label: 'Admin', href: adminUiPath() }); return entries })

@@ -207,7 +336,7 @@ const saveName = async () => {
  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 } })
+    await apiJson('/auth/api/user/display-name', { method: 'PATCH', body: { display_name: name } })
    showNameDialog.value = false
    await authStore.loadUserInfo()
    authStore.showMessage('Name updated successfully!', 'success', 3000)
@@ -219,13 +348,12 @@ const saveName = async () => {
 <style scoped>
 .view-lede { margin: 0; color: var(--color-text-muted); font-size: 1rem; }
 .section-header { display: flex; flex-direction: column; gap: 0.4rem; }
-.section-description { margin: 0; color: var(--color-text-muted); }
 .empty-state { margin: 0; color: var(--color-text-muted); text-align: center; padding: 1rem 0; }
-.logout-button { align-self: flex-start; }
-.logout-row { gap: 1rem; }
-.logout-row.single { justify-content: flex-start; }
 .logout-note { margin: 0.75rem 0 0; color: var(--color-text-muted); font-size: 0.875rem; }
 .remote-auth-inline { display: flex; flex-direction: column; gap: 0.5rem; }
 .remote-auth-label { display: block; margin: 0; font-size: 0.875rem; color: var(--color-text-muted); font-weight: 500; }
-@media (max-width: 720px) { .logout-button { width: 100%; } }
+.remote-auth-description {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
 </style>
@@ -1,15 +1,12 @@
 <template>
  <div class="qr-display">
    <div class="qr-section">
-      <a :href="url" @click.prevent="copyLink" class="qr-link" title="Click to copy link">
+      <a :href="url" @click.prevent="copyLink" class="qr-link" title="Click to copy link" tabindex="0" @keydown.enter.prevent="copyLink">
        <canvas ref="qrCanvas" class="qr-code"></canvas>
        <div v-if="showLink && url" class="link-text">{{ displayUrl }}</div>
      </a>
    </div>

-    <div v-if="showCopyToast" class="copy-toast">
-      ✓ Link copied to clipboard
-    </div>
  </div>
 </template>

@@ -25,9 +22,6 @@ const props = defineProps({
 const emit = defineEmits(['copied'])

 const qrCanvas = ref(null)
-const showCopyToast = ref(false)
-
-let copyToastTimer = null

 const displayUrl = computed(() => {
  if (!props.url) return ''
@@ -65,13 +59,7 @@ async function copyLink() {
  if (!props.url) return
  try {
    await navigator.clipboard.writeText(props.url)
-    showCopyToast.value = true
    emit('copied')
-
-    if (copyToastTimer) clearTimeout(copyToastTimer)
-    copyToastTimer = setTimeout(() => {
-      showCopyToast.value = false
-    }, 2000)
  } catch (err) {
    console.error('Failed to copy link:', err)
  }
@@ -139,23 +127,4 @@ watch(qrCanvas, () => {
 .qr-link:hover .link-text {
  color: var(--color-text);
 }
-
-.copy-toast {
-  position: absolute;
-  top: -2rem;
-  left: 50%;
-  transform: translateX(-50%);
-  background: var(--color-success);
-  color: white;
-  padding: 0.5rem 1rem;
-  border-radius: var(--radius-sm);
-  font-size: 0.875rem;
-  z-index: 10;
-  animation: fadeInOut 2s ease-in-out;
-}
-
-@keyframes fadeInOut {
-  0%, 100% { opacity: 0; }
-  10%, 90% { opacity: 1; }
-}
 </style>
@@ -1,56 +1,43 @@
 <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 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">❌</button>
+        <button class="icon-btn" @click="$emit('close')" aria-label="Close" tabindex="-1">✕</button>
      </div>

      <div class="device-link-section">
-        <!-- Loading state -->
-        <div v-if="loading" class="loading-state">
-          <div class="spinner-small"></div>
-          <span>Generating registration link...</span>
-        </div>
+        <p class="reg-help">
+          Scan this QR code on the new device, or copy the link and open it there.
+        </p>

-        <!-- Error state -->
-        <div v-else-if="error" class="error-state">
-          <p class="error-message">{{ error }}</p>
-          <button class="btn-secondary" @click="generateLink">Retry</button>
-        </div>
+        <QRCodeDisplay
+          :url="linkUrl"
+          :show-link="true"
+          @copied="onCopied"
+          @keydown="handleQRKeydown"
+        />

-        <!-- Success state with QR code and link -->
-        <template v-else-if="linkUrl">
-          <p class="reg-help">
-            Scan this QR code on the new device, or copy the link and open it there.
-          </p>
-
-          <QRCodeDisplay
-            :url="linkUrl"
-            :show-link="true"
-            @copied="onCopied"
-          />
-
-          <p class="expiry-note" v-if="expiresAt">
-            This link expires {{ formatDate(expiresAt).toLowerCase() }}.
-          </p>
-        </template>
+        <p class="expiry-note" v-if="expiresAt">
+          This link expires {{ formatDate(expiresAt).toLowerCase() }}.
+        </p>
      </div>

-      <div class="reg-actions">
+      <div class="reg-actions" ref="actionsRow" @keydown="handleActionsKeydown">
        <button class="btn-secondary" @click="$emit('close')">Close</button>
      </div>
    </div>
-  </div>
+  </dialog>
 </template>

 <script setup>
-import { ref, onMounted } from 'vue'
+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 },
@@ -59,29 +46,35 @@ const props = defineProps({

 const emit = defineEmits(['close', 'copied'])

-const loading = ref(true)
-const error = 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)

 async function generateLink() {
-  loading.value = true
-  error.value = null
-  linkUrl.value = null
-  expiresAt.value = null
-
  try {
    const data = await apiJson(props.endpoint, { method: 'POST' })
    if (data.url) {
      linkUrl.value = data.url
      expiresAt.value = data.expires ? new Date(data.expires) : null
+
+      // Show the dialog as modal
+      await nextTick()
+      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 {
-      error.value = data.detail || 'Failed to generate link'
+      emit('close')
    }
-  } catch (err) {
-    error.value = err.message || 'Failed to generate link'
-  } finally {
-    loading.value = false
+  } catch {
+    emit('close')
  }
 }

@@ -89,12 +82,79 @@ function onCopied() {
  emit('copied')
 }

+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
+  }
+}
+
+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; }
 .reg-header-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
@@ -102,8 +162,5 @@ onMounted(() => {
 .device-dialog { background: var(--color-surface); padding: 1.25rem 1.25rem 1rem; border-radius: var(--radius-md); max-width: 480px; width: 100%; box-shadow: 0 6px 28px rgba(0,0,0,.25); }
 .reg-help { margin: .5rem 0 .75rem; font-size: .85rem; line-height: 1.4; text-align: center; color: var(--color-text-muted); }
 .reg-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
-.loading-state { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 2rem 0; color: var(--color-text-muted); }
-.error-state { text-align: center; padding: 1rem 0; }
-.error-message { color: var(--color-danger-text); margin-bottom: 1rem; }
 .expiry-note { font-size: .75rem; color: var(--color-text-muted); text-align: center; margin-top: .75rem; }
 </style>
@@ -3,11 +3,14 @@
    <form @submit.prevent="submitCode" class="pairing-form">
      <!-- Code input (shown when device info not yet received) -->
      <div v-if="!deviceInfo" class="input-row">
-        <div class="input-wrapper" :class="{ 'has-error': serverError, 'is-complete': deviceInfo && !serverError, 'focused': isFocused }">
+        <div class="input-wrapper" :class="{ 'has-error': serverError, 'is-complete': deviceInfo && !serverError, 'focused': isFocused, 'has-selection': hasSelection }">
          <!-- Visual slot-machine display overlay -->
          <div class="slot-machine" :class="{ 'has-error': serverError, 'is-complete': deviceInfo && !serverError }" aria-hidden="true">
            <div v-for="(word, index) in displayWords" :key="index" class="slot-reel" :class="{ 'invalid-word': word.invalid, 'empty': !word.text && !word.typedPrefix }">
              <div class="slot-word">
+                <span v-if="word.selectionStartChar >= 0 && word.selectionEndChar > word.selectionStartChar"
+                      class="selection-overlay"
+                      :style="{ '--sel-start': word.selectionStartChar, '--sel-end': word.selectionEndChar, '--word-len': word.wordLen }"></span>
                <template v-if="word.typedPrefix">
                  <span class="typed-prefix">{{ word.typedPrefix }}</span><span class="hint-suffix">{{ word.hintSuffix }}</span>
                  <span v-if="word.hasCursor" class="cursor-overlay" :style="{ '--cursor-pos': word.cursorCharIndex, '--word-len': word.wordLen }"></span>
@@ -75,8 +78,6 @@
          </button>
        </div>
      </div>
-
-      <p v-if="error && !deviceInfo" class="error-message">{{ error }}</p>
    </form>
  </div>
 </template>
@@ -85,7 +86,7 @@
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { startAuthentication } from '@simplewebauthn/browser'
 import aWebSocket from '@/utils/awaitable-websocket'
-import { dec as b64dec, enc as b64enc } from '@/utils/base64url'
+import { b64dec, b64enc } from '@/utils/base64url'
 import { getSettings } from '@/utils/settings'
 import { getUniqueMatch, isValidWord, isValidPrefix } from '@/utils/wordlist'
 import { solvePoW } from '@/utils/pow'
@@ -95,7 +96,7 @@ const props = defineProps({
  title: { type: String, default: 'Help Another Device Sign In' },
  description: { type: String, default: 'Enter the code shown on the device that needs to sign in.' },
  placeholder: { type: String, default: 'Enter three words' },
-  action: { type: String, default: 'login' } // 'login' or 'register'
+  action: { type: String, default: 'login' }, // 'login' or 'register'
 })

 const emit = defineEmits(['completed', 'error', 'cancelled', 'back', 'register', 'deviceInfoVisible'])
@@ -126,7 +127,11 @@ watch(deviceInfo, (newVal) => {
 const hasInvalidWord = ref(false)
 const serverError = ref(false)
 const cursorPos = ref(0)
+const selectionStart = ref(0)
+const selectionEnd = ref(0)
 const isFocused = ref(false)
+const isDeleting = ref(false)
+let previousCursorPos = 0
 let wsConnecting = false
 let currentChallenge = null
 let currentWork = null
@@ -166,9 +171,42 @@ function getWords(input) {
  return input.trim().split(/[.\s]+/).filter(w => w.length > 0)
 }

+// Get words for display, splitting concatenated valid words (e.g., "alienfood" -> ["alien", "food"])
+function getDisplayWords(input) {
+  const rawWords = getWords(input)
+  const result = []
+
+  for (const rawWord of rawWords) {
+    // Try to split this raw word into valid words
+    let remaining = rawWord.toLowerCase()
+    while (remaining.length > 0 && result.length < 3) {
+      let foundWord = null
+      // Try to find the longest valid word from the start
+      for (let len = Math.min(remaining.length, 6); len >= 3; len--) {
+        const candidate = remaining.slice(0, len)
+        if (isValidWord(candidate)) {
+          foundWord = candidate
+          break
+        }
+      }
+      if (foundWord) {
+        result.push(foundWord)
+        remaining = remaining.slice(foundWord.length)
+      } else {
+        // No valid word found, keep the remaining as partial word
+        result.push(remaining)
+        break
+      }
+    }
+    if (result.length >= 3) break
+  }
+
+  return result
+}
+
 function countCompleteWords(input) {
  const endsWithSeparator = /[.\s]$/.test(input)
-  const words = getWords(input)
+  const words = getDisplayWords(input)
  return endsWithSeparator ? words.length : Math.max(0, words.length - 1)
 }

@@ -199,7 +237,7 @@ const coloredSegments = computed(() => {
 })

 function checkWordsValidity(input) { return analyzeWords(input).valid }
-function allWordsValid(input) { return getWords(input).length > 0 && getWords(input).every(w => isValidWord(w)) }
+function allWordsValid(input) { return getDisplayWords(input).length > 0 && getDisplayWords(input).every(w => isValidWord(w)) }

 // Get the current partial word being typed (not yet a complete word)
 function getCurrentPartialWord(input) {
@@ -211,61 +249,127 @@ function getCurrentPartialWord(input) {

 // Calculate cursor position in the normalized display (wordIndex, charIndex within word)
 // Returns { wordIndex: number, charIndex: number } where charIndex is position within the word text
+// This handles concatenated words like "alienfood" being displayed as "alien" + "food"
 function calcDisplayCursor(input, rawCursorPos) {
  if (!input || rawCursorPos === 0) {
    return { wordIndex: 0, charIndex: 0 }
  }

-  // Parse input to find word boundaries
  const beforeCursor = input.slice(0, rawCursorPos)
-  const wordMatches = [...beforeCursor.matchAll(/[a-zA-Z]+/g)]
-
-  // Check if cursor is in whitespace after words
  const endsWithSeparator = /[.\s]$/.test(beforeCursor)

-  if (wordMatches.length === 0) {
-    // No words before cursor, cursor is at start of first word
+  // Get display words for the text before cursor
+  const displayWordsBefore = getDisplayWords(beforeCursor)
+
+  if (displayWordsBefore.length === 0) {
    return { wordIndex: 0, charIndex: 0 }
  }

-  const lastMatch = wordMatches[wordMatches.length - 1]
-  const lastMatchEnd = lastMatch.index + lastMatch[0].length
-
-  if (endsWithSeparator || rawCursorPos > lastMatchEnd) {
-    // Cursor is after the last word (in whitespace), so it's at start of next word
-    return { wordIndex: Math.min(wordMatches.length, 2), charIndex: 0 }
+  if (endsWithSeparator) {
+    // Cursor is in whitespace after words, so it's at start of next word
+    return { wordIndex: Math.min(displayWordsBefore.length, 2), charIndex: 0 }
  }

-  // Cursor is within the last word
-  const charIndex = rawCursorPos - lastMatch.index
-  return { wordIndex: wordMatches.length - 1, charIndex: charIndex }
+  // Cursor is within/after the last display word
+  const lastDisplayWord = displayWordsBefore[displayWordsBefore.length - 1]
+  const wordIndex = displayWordsBefore.length - 1
+
+  // Find where in the original input this display word ends
+  // by getting the full display words and comparing
+  const fullDisplayWords = getDisplayWords(input)
+
+  // Calculate char position within the word
+  // The last display word from beforeCursor might be partial
+  const charIndex = lastDisplayWord.length
+
+  // If this word is a complete valid word and it's not the 3rd word (index 2),
+  // show cursor at start of next slot - but only when typing forward, not when deleting
+  if (wordIndex < 2 && !isDeleting.value) {
+    if (isValidWord(lastDisplayWord)) {
+      return { wordIndex: wordIndex + 1, charIndex: 0 }
+    }
+  }
+
+  return { wordIndex: Math.min(wordIndex, 2), charIndex: charIndex }
+}
+
+// Calculate display cursor without the "advance to next word" logic (for selection bounds)
+function calcDisplayCursorRaw(input, rawCursorPos) {
+  if (!input || rawCursorPos === 0) {
+    return { wordIndex: 0, charIndex: 0 }
+  }
+
+  const beforeCursor = input.slice(0, rawCursorPos)
+  const endsWithSeparator = /[.\s]$/.test(beforeCursor)
+  const displayWordsBefore = getDisplayWords(beforeCursor)
+
+  if (displayWordsBefore.length === 0) {
+    return { wordIndex: 0, charIndex: 0 }
+  }
+
+  if (endsWithSeparator) {
+    return { wordIndex: Math.min(displayWordsBefore.length, 2), charIndex: 0 }
+  }
+
+  const lastDisplayWord = displayWordsBefore[displayWordsBefore.length - 1]
+  const wordIndex = displayWordsBefore.length - 1
+  return { wordIndex: Math.min(wordIndex, 2), charIndex: lastDisplayWord.length }
 }

 // Compute display words for slot-machine overlay (always 3 slots)
 const displayWords = computed(() => {
-  const words = getWords(code.value)
+  const words = getDisplayWords(code.value)
  const result = []

-  // Get analysis for validation
-  const { segments } = analyzeWords(code.value)
-  const wordSegments = segments.filter(s => s.isWord)
-
  // Get current partial word and autocomplete hint
  const partialWord = getCurrentPartialWord(code.value)
  const hint = autocompleteHint.value
  const endsWithSeparator = /[.\s]$/.test(code.value)

+  // Calculate selection bounds (raw positions without advance logic)
+  const hasSelectionNow = selectionStart.value !== selectionEnd.value
+  const selStart = calcDisplayCursorRaw(code.value, Math.min(selectionStart.value, selectionEnd.value))
+  const selEnd = calcDisplayCursorRaw(code.value, Math.max(selectionStart.value, selectionEnd.value))
+
  // Calculate where cursor should be displayed
-  const cursor = calcDisplayCursor(code.value, cursorPos.value)
+  // Use raw position when there's a selection (cursor shows at active end without advance)
+  // Use advance logic only when typing without selection
+  const cursor = hasSelectionNow
+    ? calcDisplayCursorRaw(code.value, cursorPos.value)
+    : calcDisplayCursor(code.value, cursorPos.value)

  // Always show exactly 3 slots
  for (let i = 0; i < 3; i++) {
    const isCursorSlot = cursor.wordIndex === i

+    // Calculate selection range for this word
+    let selectionStartChar = -1
+    let selectionEndChar = -1
+    if (hasSelectionNow) {
+      if (i > selStart.wordIndex && i < selEnd.wordIndex) {
+        // Entire word is selected
+        selectionStartChar = 0
+        selectionEndChar = words[i]?.length ?? 0
+      } else if (i === selStart.wordIndex && i === selEnd.wordIndex) {
+        // Selection starts and ends in this word
+        selectionStartChar = selStart.charIndex
+        selectionEndChar = selEnd.charIndex
+      } else if (i === selStart.wordIndex) {
+        // Selection starts in this word
+        selectionStartChar = selStart.charIndex
+        selectionEndChar = words[i]?.length ?? 0
+      } else if (i === selEnd.wordIndex) {
+        // Selection ends in this word
+        selectionStartChar = 0
+        selectionEndChar = selEnd.charIndex
+      }
+    }
+
    if (i < words.length) {
      const word = words[i].toLowerCase()
-      const isInvalid = wordSegments[i]?.invalid || false
      const isLastWord = i === words.length - 1
+      // Validate: last word without separator can be a prefix, others must be complete words
+      const isInvalid = (isLastWord && !endsWithSeparator) ? !isValidPrefix(word) : !isValidWord(word)

      if (isLastWord && !endsWithSeparator && hint && partialWord) {
        // Show typed prefix + hint suffix in the same slot
@@ -278,7 +382,9 @@ const displayWords = computed(() => {
          invalid: isInvalid,
          hasCursor: isCursorSlot,
          cursorCharIndex: isCursorSlot ? cursor.charIndex : -1,
-          wordLen: totalLen
+          wordLen: totalLen,
+          selectionStartChar,
+          selectionEndChar
        })
      } else {
        // Complete word - show cursor at appropriate position
@@ -287,7 +393,9 @@ const displayWords = computed(() => {
          invalid: isInvalid,
          hasCursor: isCursorSlot,
          cursorCharIndex: isCursorSlot ? cursor.charIndex : -1,
-          wordLen: word.length
+          wordLen: word.length,
+          selectionStartChar,
+          selectionEndChar
        })
      }
    } else {
@@ -297,7 +405,9 @@ const displayWords = computed(() => {
        invalid: false,
        hasCursor: isCursorSlot,
        cursorCharIndex: 0,
-        wordLen: 0
+        wordLen: 0,
+        selectionStartChar,
+        selectionEndChar
      })
    }
  }
@@ -305,13 +415,17 @@ const displayWords = computed(() => {
  return result
 })

+const hasSelection = computed(() => selectionStart.value !== selectionEnd.value)
+
 const hasThreeValidWords = computed(() => {
-  const words = getWords(code.value)
+  const words = getDisplayWords(code.value)
  return words.length === 3 && words.every(w => isValidWord(w))
 })

 function normalizeCode(input) {
-  return input.trim().toLowerCase().split(/[.\s]+/).filter(w => w).join('.')
+  // Use display words to handle concatenated words like "alienfood" -> "alien.food"
+  const words = getDisplayWords(input)
+  return words.join('.')
 }

 function startPowSolving() {
@@ -346,7 +460,7 @@ async function ensureConnection() {
  wsConnecting = true
  try {
    const authHost = settings.value?.auth_host
-    const wsPath = '/auth/ws/remote-auth/pair'
+    const wsPath = '/auth/ws/remote-auth/permit'
    const wsUrl = authHost && location.host !== authHost ? `//${authHost}${wsPath}` : wsPath
    ws = await aWebSocket(wsUrl)
    const msg = await ws.receive_json()
@@ -365,7 +479,7 @@ async function ensureConnection() {
 // Defer cursor position update to after browser processes the key
 function deferUpdateCursor(event) {
  // Handle Tab/Space for autocomplete immediately
-  if (event.key === 'Tab' || event.key === ' ') {
+  if (event.key === 'Tab' || event.key === ' ' || event.key === 'Escape') {
    handleKeydown(event)
    return
  }
@@ -373,9 +487,22 @@ function deferUpdateCursor(event) {
  setTimeout(updateCursorPos, 0)
 }

-// Update cursor position from input
 function updateCursorPos() {
-  cursorPos.value = inputRef.value?.selectionStart ?? code.value.length
+  const input = inputRef.value
+  const start = input?.selectionStart ?? code.value.length
+  const end = input?.selectionEnd ?? start
+
+  // Track direction based on which end moved
+  // If selection exists, cursor is at the end being moved (selectionDirection)
+  const direction = input?.selectionDirection ?? 'none'
+  const activeCursor = direction === 'backward' ? start : end
+
+  isDeleting.value = activeCursor < previousCursorPos
+  previousCursorPos = activeCursor
+  cursorPos.value = activeCursor
+  selectionEnd.value = end
+  // Store start separately - cursorPos is the active end, we need both for selection
+  selectionStart.value = start
 }

 function updateAutocomplete() {
@@ -396,7 +523,7 @@ function applyAutocomplete() {
  const { word, start, end } = getWordAtCursor(code.value, cursorPos.value)
  if (!word) return false
  const before = code.value.slice(0, start)
-  const wordsBefore = getWords(before).length
+  const wordsBefore = getDisplayWords(before).length
  const isThirdWord = wordsBefore === 2
  const suffix = isThirdWord ? '' : ' '
  const after = code.value.slice(end)
@@ -410,83 +537,33 @@ function applyAutocomplete() {
  return true
 }

-// Try to split concatenated words (e.g., "alienalien" -> "alien alien")
-function trySplitWords(input) {
-  // Only process if there's a continuous string of letters at the end
-  const match = input.match(/^(.*?)([a-zA-Z]+)$/)
-  if (!match) return input
-
-  const prefix = match[1]  // Everything before the letter sequence
-  const letters = match[2].toLowerCase()
-
-  // Try to find valid word boundaries in the letter sequence
-  const foundWords = []
-  let remaining = letters
-
-  while (remaining.length > 0) {
-    let foundWord = null
-
-    // Try to find the longest valid word from the start
-    for (let len = Math.min(remaining.length, 6); len >= 3; len--) {
-      const candidate = remaining.slice(0, len)
-      if (isValidWord(candidate)) {
-        foundWord = candidate
-        break
-      }
-    }
-
-    if (foundWord) {
-      foundWords.push(foundWord)
-      remaining = remaining.slice(foundWord.length)
-
-      // Stop after 3 words
-      if (foundWords.length >= 3) {
-        remaining = ''
-        break
-      }
-    } else {
-      // No valid word found, keep the remaining as-is
-      foundWords.push(remaining)
-      break
-    }
-  }
-
-  // Only return split version if we found at least one complete word
-  // and there's a clear boundary (more than one segment, or the segment is a complete word)
-  if (foundWords.length > 1 || (foundWords.length === 1 && isValidWord(foundWords[0]) && remaining === '')) {
-    return prefix + foundWords.join(' ')
-  }
-
-  return input
-}
-
 function handleInput() {
-  // Immediately update cursor position
  cursorPos.value = inputRef.value?.selectionStart ?? code.value.length

-  // First, try to auto-split concatenated words
-  const splitCode = trySplitWords(code.value)
-  if (splitCode !== code.value) {
-    code.value = splitCode
-    nextTick(() => {
-      const newLen = splitCode.length
-      inputRef.value?.setSelectionRange(newLen, newLen)
-      cursorPos.value = newLen
-    })
-  }
-
-  const words = getWords(code.value)
-  if (words.length >= 3) {
-    const normalized = words.slice(0, 3).join(' ')
-    if (code.value !== normalized) {
-      const cursorWasAtEnd = cursorPos.value >= code.value.length
-      code.value = normalized
-      if (cursorWasAtEnd) {
-        nextTick(() => {
-          inputRef.value?.setSelectionRange(normalized.length, normalized.length)
-          cursorPos.value = normalized.length
-        })
-      }
+  // Mobile fallback for autocomplete: if cursor is right after "prefix " (partial word + space),
+  // replace the partial with the completed word. On desktop, keydown intercepts space before input,
+  // but mobile soft keyboards often insert the space before we can catch it.
+  const cursor = cursorPos.value
+  const beforeCursor = code.value.slice(0, cursor)
+  // Check if cursor is right after a space that follows a word
+  const spaceMatch = beforeCursor.match(/([a-zA-Z]+) $/)
+  if (spaceMatch) {
+    const partialWord = spaceMatch[1].toLowerCase()
+    const match = getUniqueMatch(partialWord)
+    // Only autocomplete if it's not already a complete word and we have a unique match
+    if (match && match !== partialWord && !isValidWord(partialWord)) {
+      const wordStartPos = cursor - spaceMatch[0].length
+      const beforeWord = code.value.slice(0, wordStartPos)
+      const afterSpace = code.value.slice(cursor)
+      const wordsBefore = getDisplayWords(beforeWord).length
+      const isThirdWord = wordsBefore === 2
+      const suffix = isThirdWord ? '' : ' '
+      code.value = beforeWord + match + suffix + afterSpace
+      const newPos = wordStartPos + match.length + suffix.length
+      nextTick(() => {
+        inputRef.value?.setSelectionRange(newPos, newPos)
+        cursorPos.value = newPos
+      })
    }
  }

@@ -496,7 +573,7 @@ function handleInput() {
  error.value = null
  serverError.value = false
  hasInvalidWord.value = !checkWordsValidity(code.value)
-  const currentWords = getWords(code.value)
+  const currentWords = getDisplayWords(code.value)
  if (currentWords.length >= 1 && !ws && !wsConnecting) ensureConnection()
  if (currentWords.length === 3) {
    if (!allWordsValid(code.value)) return
@@ -527,14 +604,13 @@ async function lookupDeviceInfo() {
    const res = await ws.receive_json()
    updateChallenge(res.pow)
    if (typeof res.status === 'number' && res.status >= 400) {
-      error.value = res.detail || 'Request failed'
+      showMessage(res.detail || 'Request failed', 'error')
      serverError.value = true
      deviceInfo.value = null
      lastLookedUpCode = null
      return
    }
    if (res.status === 'found' && res.host) {
-      code.value = currentCode.replace(/\./g, ' ')
      deviceInfo.value = {
        host: res.host,
        user_agent_pretty: res.user_agent_pretty,
@@ -544,14 +620,14 @@ async function lookupDeviceInfo() {
      lastLookedUpCode = currentCode
      nextTick(() => { submitBtnRef.value?.focus() })
    } else {
-      error.value = 'Unexpected response from server'
+      showMessage('Unexpected response from server', 'error')
      serverError.value = true
      deviceInfo.value = null
      lastLookedUpCode = null
    }
  } catch (err) {
    console.error('Lookup error:', err)
-    error.value = err.message || 'Lookup failed'
+    showMessage(err.message || 'Lookup failed', 'error')
    serverError.value = true
    deviceInfo.value = null
    lastLookedUpCode = null
@@ -563,6 +639,12 @@ async function lookupDeviceInfo() {
 }

 function handleKeydown(event) {
+  if (event.key === 'Escape') {
+    code.value = ''
+    handleInput()
+    event.preventDefault()
+    return
+  }
  if (event.key === 'Tab') {
    if (autocompleteHint.value) {
      const applied = applyAutocomplete()
@@ -654,7 +736,6 @@ function reset() {

 onMounted(async () => {
  await fetchSettings()
-  inputRef.value?.focus()
  // Initialize cursor position
  nextTick(() => {
    cursorPos.value = inputRef.value?.selectionStart ?? 0
@@ -696,48 +777,26 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
  max-width: 100%;
 }

-/* Slot machine visual display (matches RemoteAuthInline) */
+/* Slot machine visual display (matches RemoteAuthRequest) */
 .slot-machine {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
-  padding: 0.875rem 1rem;
-  background: var(--color-surface-hover, rgba(0, 0, 0, 0.03));
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-sm, 6px);
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-  display: flex;
  gap: 0;
-  align-items: center;
-  user-select: none;
-  pointer-events: none;
-  white-space: nowrap;
-  overflow: hidden;
  box-sizing: border-box;
  z-index: 1;
+  pointer-events: none;
 }

-.slot-machine.has-error {
-  border-color: var(--color-error, #ef4444);
+.input-wrapper.focused.has-error .slot-machine {
  background: var(--color-error-bg, rgba(239, 68, 68, 0.05));
 }

-.slot-machine.is-complete {
-  border-color: var(--color-success, #10b981);
-}
-
 .slot-reel {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
  flex: 1 1 33.333%;
-  min-width: 0;
-  height: 1.8em;
  overflow: visible;
-  position: relative;
-  border-radius: 3px;
 }

 .slot-reel:not(:last-child) {
@@ -745,7 +804,6 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
 }

 .slot-word {
-  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
@@ -781,16 +839,27 @@ defineExpose({ reset, deny, code, handleInput, loading, error })

 .input-wrapper.focused .cursor-overlay {
  opacity: 1;
-  animation: cursorBlink 1s ease-in-out infinite;
+  animation: cursorBlink 250ms alternate infinite;
+}
+
+.input-wrapper.focused.has-selection .cursor-overlay {
+  animation: none;
+}
+
+.selection-overlay {
+  position: absolute;
+  height: 1.2em;
+  background: var(--color-primary, #3b82f6);
+  opacity: 0.3;
+  pointer-events: none;
+  /* Position based on character indices - calculate from center of slot */
+  left: calc(50% + (var(--sel-start) - var(--word-len, 0) / 2) * 0.65em);
+  width: calc((var(--sel-end) - var(--sel-start)) * 0.65em);
 }

@keyframes cursorBlink {
-  0%, 49% {
-    opacity: 1;
-  }
-  50%, 100% {
-    opacity: 0;
-  }
+  0%, 50% { opacity: 1; }
+  80%, 100% { opacity: 0; }
 }

 .slot-reel.invalid-word .slot-word {
@@ -814,23 +883,13 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
  flex: 1;
  width: 100%;
  height: 100%;
-  padding: 0.875rem 1rem;
-  font-size: 1rem;
-  font-family: inherit;
-  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
-  background: transparent;
-  color: transparent;
-  caret-color: transparent;
-  outline: none;
-  box-sizing: border-box;
  position: relative;
  z-index: 0;
 }

 .pairing-input.hidden-input {
-  color: transparent;
-  caret-color: transparent;
+  opacity: 0;
 }

 .pairing-input:disabled {
@@ -56,7 +56,7 @@
 <script setup>
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import aWebSocket from '@/utils/awaitable-websocket'
-import { dec as b64dec, enc as b64enc } from '@/utils/base64url'
+import { b64dec, b64enc } from '@/utils/base64url'
 import { getSettings } from '@/utils/settings'
 import { solvePoW } from '@/utils/pow'
 import { words } from '@/utils/wordlist'
@@ -360,16 +360,8 @@ defineExpose({ retry, cancel })
 }

 .slot-reel {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  min-width: 0;
-  height: 1.8em;
  overflow: hidden;
-  position: relative;
  background: var(--color-surface, rgba(255, 255, 255, 0.5));
-  border-radius: 3px;
 }

 .slot-machine:not(.stopped) .slot-reel:nth-child(1) {
@@ -18,7 +18,7 @@
          <div class="section-body center">
            <!-- Local passkey authentication view -->
            <div v-if="authView === 'local'" class="auth-view">
-              <div class="button-row center">
+              <div class="button-row center" ref="buttonRow">
                <slot name="actions"
                  :loading="loading"
                  :can-authenticate="canAuthenticate"
@@ -39,7 +39,7 @@

            <!-- Remote authentication view (request new remote auth) -->
            <div v-else-if="authView === 'remote'" class="auth-view">
-              <RemoteAuthInline
+              <RemoteAuthRequest
                :active="authView === 'remote'"
                @authenticated="handleRemoteAuthenticated"
                @register="handleRemoteRegistration"
@@ -55,11 +55,12 @@
 </template>

 <script setup>
-import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import passkey from '@/utils/passkey'
 import { getSettings, uiBasePath } from '@/utils/settings'
 import { fetchJson, getUserFriendlyErrorMessage } from '@/utils/api'
-import RemoteAuthInline from '@/components/RemoteAuthRequest.vue'
+import RemoteAuthRequest from '@/components/RemoteAuthRequest.vue'
+import { focusDialogButton } from '@/utils/keynav'

 const props = defineProps({
  mode: {
@@ -78,6 +79,7 @@ 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)
@@ -255,6 +257,13 @@ function handleHeaderLinkClick(event) {
  }
 }

+// Autofocus primary button when the view becomes ready
+watch(initializing, (newVal) => {
+  if (!newVal) {
+    nextTick(() => focusDialogButton(buttonRow.value))
+  }
+})
+
 onMounted(async () => {
  await fetchSettings()
  await fetchUserInfo()
@@ -5,14 +5,15 @@
      <p class="section-description">{{ sectionDescription }}</p>
    </div>
    <div class="section-body">
-      <div :class="['session-list']">
+      <div>
        <template v-if="Array.isArray(sessions) && sessions.length">
-          <div v-for="(group, host) in groupedSessions" :key="host" class="session-group">
-            <h3 :class="['session-group-host', { 'is-current-site': group.isCurrentSite }]">
-              <template v-if="host"><a :href="hostUrl(host)">🌐 {{ host }}</a></template>
-              <template v-else>🌐 Unbound host</template>
-            </h3>
-            <div class="session-group-sessions">
+          <div 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"
@@ -21,9 +22,12 @@
                  'is-hovered': hoveredSession?.id === session.id,
                  'is-linked-credential': hoveredCredentialUuid === session.credential_uuid
                }]"
-                tabindex="0"
+                tabindex="-1"
+                @mousedown.prevent
+                @click.capture="handleCardClick"
                @focusin="handleSessionFocus(session)"
                @focusout="handleSessionBlur($event)"
+                @keydown="handleItemKeydown($event, session)"
              >
                <div class="item-top">
                  <h4 class="item-title">{{ session.user_agent }}</h4>
@@ -31,19 +35,20 @@
                    <span v-if="session.is_current && !hoveredIp && !hoveredCredentialUuid" class="badge badge-current">Current</span>
                    <span v-else-if="hoveredSession?.id === session.id" class="badge badge-current">Selected</span>
                    <span v-else-if="hoveredCredentialUuid === session.credential_uuid" class="badge badge-current">Linked</span>
-                    <span v-else-if="!hoveredCredentialUuid && isSameNetwork(session.ip)" class="badge">Same IP</span>
+                    <span v-else-if="!hoveredCredentialUuid && isSameHost(session.ip)" class="badge">Same IP</span>
                    <button
                      @click="$emit('terminate', session)"
                      class="btn-card-delete"
                      :disabled="isTerminating(session.id)"
                      :title="isTerminating(session.id) ? 'Terminating...' : 'Terminate session'"
-                    >🗑️</button>
+                      tabindex="-1"
+                    >❌</button>
                  </div>
                </div>
                <div class="item-details">
                  <div class="session-dates">
                    <span class="date-label">{{ formatDate(session.last_renewed) }}</span>
-                    <span class="date-value">{{ session.ip }}</span>
+                    <span class="date-value" @click="copyIp(session.ip)" title="Click to copy full IP">{{ displayIp(session.ip) }}</span>
                  </div>
                </div>
              </div>
@@ -59,6 +64,9 @@
 <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: () => [] },
@@ -66,9 +74,12 @@ const props = defineProps({
  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'])
+const emit = defineEmits(['terminate', 'sessionHover', 'navigate-out'])
+
+const authStore = useAuthStore()

 const hoveredIp = ref(null)
 const hoveredSession = ref(null)
@@ -88,41 +99,122 @@ const handleSessionBlur = (event) => {
  }
 }

+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}`
 }

-// Extract /64 prefix for IPv6, or return full IP for IPv4
-const getNetworkPrefix = ip => {
-  if (!ip) return null
-
-  // IPv4?
-  if (!ip.includes(':')) return ip
-
-  // Normalize IPv6 using URL
-  // Wrap in brackets so URL accepts it
-  const norm = new URL(`http://[${ip}]/`).hostname
-
-  // norm is now fully expanded, e.g. "2001:0db8:0000:0000:0000:0000:0000:0001"
-  const parts = norm.split(':')
-  return parts.slice(0, 4).join(':')
+const copyIp = async (ip) => {
+  if (!ip) return
+  try {
+    await navigator.clipboard.writeText(ip)
+    authStore.showMessage('Full IP copied to clipboard!', 'success', 2000)
+  } catch (err) {
+    console.error('Failed to copy IP:', err)
+    authStore.showMessage('Failed to copy IP', 'error', 3000)
+  }
 }

-const currentNetworkPrefix = computed(() => {
-  // Use hovered IP if available, otherwise fall back to current session
-  if (hoveredIp.value) return getNetworkPrefix(hoveredIp.value)
+const 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 ? getNetworkPrefix(current.ip) : null
+  return current ? hostIP(current.ip) : null
 })

-const isSameNetwork = (ip) => {
-  if (!currentNetworkPrefix.value || !ip) return false
-  return getNetworkPrefix(ip) === currentNetworkPrefix.value
-}
+const isSameHost = ip => currentHostIP.value && hostIP(ip) === currentHostIP.value

 const groupedSessions = computed(() => {
  const groups = {}
@@ -150,57 +242,3 @@ const groupedSessions = computed(() => {
  return sortedGroups
 })
 </script>
-
-<style>
-.session-meta-info {
-  grid-column: span 2;
-}
-[data-component="session-list-section"] .session-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5em;
-}
-.session-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5em;
-}
-.session-group-host {
-  font-size: 1em;
-  font-weight: 600;
-  margin: 0;
-}
-.session-group-host a {
-  color: inherit;
-  text-decoration: none;
-}
-.session-group-host a:hover {
-  text-decoration: underline;
-}
-.session-group-host.is-current-site {
-  color: var(--color-accent);
-}
-.session-group-sessions {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
-  gap: 0.5em;
-  align-items: start;
-}
-.session-group-sessions .session-item {
-  width: auto;
-  height: auto;
-  padding: 0.75rem;
-  gap: 0.5rem;
-}
-.session-group-sessions .session-item .item-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.session-group-sessions .session-item .item-details {
-  margin-left: 0;
-}
-.session-group-sessions .session-item .session-dates {
-  grid-template-columns: auto 1fr;
-}
-</style>
@@ -11,12 +11,14 @@
      <div class="org-line" v-if="orgDisplayName">{{ orgDisplayName }}</div>
      <div class="role-line" v-if="roleName">{{ roleName }}</div>
    </div>
-    <span class="info-label"><strong>Visits:</strong></span>
-    <span class="info-value">{{ visits || 0 }}</span>
-    <span class="info-label"><strong>Registered:</strong></span>
-    <span class="info-value">{{ formatDate(createdAt) }}</span>
-    <span class="info-label"><strong>Last seen:</strong></span>
-    <span class="info-value">{{ formatDate(lastSeen) }}</span>
+    <div 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>
@@ -48,14 +50,13 @@ const userLoaded = computed(() => !!props.name)

 <style scoped>
 .user-info.has-extra {
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto 1fr 2fr;
  grid-template-areas:
-    "heading heading"
-    "org org"
-    "label1 value1"
-    "label2 value2"
-    "label3 value3"
-    "extra extra";
+    "heading heading extra"
+    "org org extra"
+    "label1 value1 extra"
+    "label2 value2 extra"
+    "label3 value3 extra";
 }

 .user-info:not(.has-extra) {
@@ -68,19 +69,20 @@ const userLoaded = computed(() => !!props.name)
    "label3 value3";
 }

-@media (min-width: 769px) {
+@media (max-width: 720px) {
  .user-info.has-extra {
-    grid-template-columns: auto 1fr 2fr;
+    grid-template-columns: auto 1fr;
    grid-template-areas:
-      "heading heading extra"
-      "org org extra"
-      "label1 value1 extra"
-      "label2 value2 extra"
-      "label3 value3 extra";
+      "heading heading"
+      "org org"
+      "label1 value1"
+      "label2 value2"
+      "label3 value3"
+      "extra extra";
  }
 }

-.user-name-heading { grid-area: heading; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.25rem 0; }
+.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; }
@@ -93,15 +95,13 @@ const userLoaded = computed(() => !!props.name)
 .user-info-extra { grid-area: extra; padding-left: 2rem; border-left: 1px solid var(--color-border); }
 .user-name-row { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; }
 .user-name-row.editing { flex: 1 1 auto; }
-.icon { flex: 0 0 auto; }
 .display-name { font-weight: 600; font-size: 1.05em; line-height: 1.2; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .name-input { width: auto; flex: 1 1 140px; min-width: 120px; padding: 6px 8px; font-size: 0.9em; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface); color: var(--color-text); }
 .user-name-heading .name-input { width: auto; }
 .name-input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
-.mini-btn { width: auto; padding: 4px 6px; margin: 0; font-size: 0.75em; line-height: 1; background: var(--color-surface-muted); border: 1px solid var(--color-border-strong); border-radius: 6px; cursor: pointer; transition: background 0.2s, transform 0.15s, color 0.2s ease; color: var(--color-text); }
+.mini-btn { width: auto; padding: 4px 6px; margin: 0; font-size: 0.75em; line-height: 1; cursor: pointer; }
 .mini-btn:hover:not(:disabled) { background: var(--color-accent-soft); color: var(--color-accent); }
 .mini-btn:active:not(:disabled) { transform: translateY(1px); }
 .mini-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-@media (max-width: 768px) { .user-info-extra { padding-left: 0; padding-top: 1rem; border-left: none; border-top: 1px solid var(--color-border); } }
-@media (max-width: 480px) { .user-name-heading { flex-direction: column; align-items: flex-start; } .user-name-row.editing { width: 100%; } .display-name { max-width: 100%; } }
+@media (max-width: 720px) { .user-info-extra { padding-left: 0; padding-top: 1rem; margin-top: 1rem; border-left: none; border-top: 1px solid var(--color-border); } }
 </style>
@@ -26,16 +26,18 @@ export const useAuthStore = defineStore('auth', {
    setLoading(flag) {
      this.isLoading = !!flag
    },
-    showMessage(message, type = 'info', duration = 3000) {
+    showMessage(message, type = 'info', duration = null) {
+      // Default duration: 5 seconds for errors, 3 seconds for others
+      const effectiveDuration = duration ?? (type === 'error' ? 5000 : 3000)
      this.status = {
        message,
        type,
        show: true
      }
-      if (duration > 0) {
+      if (effectiveDuration > 0) {
        setTimeout(() => {
          this.status.show = false
-        }, duration)
+        }, effectiveDuration)
      }
    },
    async setSessionCookie(result) {
@@ -49,6 +49,29 @@ 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 = {}

@@ -93,6 +116,7 @@ export function isAuthIframeOpen() {
 /**
 * 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
@@ -119,6 +143,9 @@ export function showAuthIframe(iframeUrl) {
  // 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'
@@ -134,6 +161,7 @@ function hideAuthIframe() {
  if (authIframe) {
    authIframe.remove()
    authIframe = null
+    releaseGlobalBackdrop()
  }
 }

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

 export const goBack = () => history.back() || window.close()
+
+// IPv4 unchanged, IPv6 returns /64 network prefix in compact form
+export const hostIP = ip => {
+  try {
+    if (!ip || !ip.includes(':')) return ip
+    const strip = s => s.replace(/^\[|\]$/g, '')
+    const norm = strip(new URL(`http://[${ip}]/`).hostname)
+    const [l, r] = norm.split('::').map(s => s ? s.split(':') : [])
+    const full = r ? [...l, ...Array(8 - l.length - r.length).fill('0'), ...r] : l
+    return strip(new URL(`http://[${full.slice(0, 4).join(':')}::]/`).hostname).replace(/::$/, '')
+  } catch (e) {
+    console.error('hostIP processing failed for:', ip, e)
+    return ip
+  }
+}
@@ -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
+}
@@ -57,21 +57,15 @@ export async function register(resetToken = null, displayName = null, onstartreg
 export async function authenticate() {
  const ws = await aWebSocket(await makeUrl('/auth/ws/authenticate'))
  try {
-    const res = await ws.receive_json()
-    console.log('Authentication options:', res)
-    // status field present means error
-    if (res.status) {
-      throw new Error(res.detail || `Authentication failed: ${res.status}`)
-    }
+    let res = await ws.receive_json()
+    if (res.status >= 400) throw new Error(res.detail || `Authentication failed: ${res.status}`)

    const authResponse = await startAuthentication(res)
    ws.send_json(authResponse)

-    const result = await ws.receive_json()
-    if (result.status) {
-      throw new Error(result.detail || `Authentication failed: ${result.status}`)
-    }
-    return result
+    res = await ws.receive_json()
+    if (res.status >= 400) throw new Error(res.detail || `Authentication failed: ${res.status}`)
+    return res
  } catch (error) {
    console.error('Authentication error:', error)
    throw Error(error.name === "NotAllowedError" ? 'Passkey authentication cancelled' : error.message)
@@ -0,0 +1,35 @@
+/**
+ * FastAPI-Vue Vite Plugin
+ *
+ * Configures Vite for FastAPI backend integration:
+ * - Proxies /api/* requests to the FastAPI backend
+ * - Builds to the Python module's frontend-build directory
+ *
+ * Environment variables (with defaults):
+ *   FASTAPI_VUE_BACKEND_URL=http://localhost:5180 - Backend API URL for proxying
+ */
+
+const backendUrl = process.env.FASTAPI_VUE_BACKEND_URL || "http://localhost:5180"
+
+export default function fastapiVue({ paths = ["/api"] } = {}) {
+  // Build proxy configuration for each path
+  const proxy = {}
+  for (const path of paths) {
+    proxy[path] = {
+      target: backendUrl,
+      changeOrigin: false,
+      ws: true,
+    }
+  }
+
+  return {
+    name: "fastapi-vite",
+    config: () => ({
+      server: { proxy },
+      build: {
+        outDir: "../paskia/frontend-build",
+        emptyOutDir: true,
+      },
+    }),
+  }
+}
@@ -4,18 +4,60 @@ import { resolve } from 'node:path'
 import vue from '@vitejs/plugin-vue'
 import { existsSync, renameSync, mkdirSync } from 'node:fs'
 import sirv from 'sirv'
+import fastapiVue from './vite-plugin-fastapi.js'
+
+// Auth host mode: when set, clients accessing the auth host get /auth/ at / and /auth/admin/ at /admin/
+const authHost = process.env.PASKIA_AUTH_HOST

 export default defineConfig(({ command }) => ({
  appType: 'mpa',
  publicDir: 'public',
  plugins: [
+    fastapiVue({ paths: [
+      "/auth/api",
+      "/auth/ws",
+      // Passphrase links: /auth/word1.word2.word3.word4.word5
+      "^/auth/[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+$",
+      // Passphrase links: /word1.word2.word3.word4.word5
+      "^/[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+$",
+    ] }),
    vue(),
+    // Auth host routing: rewrite paths when accessing dedicated auth host
+    // Must run before serve-examples to handle / correctly
+    authHost && {
+      name: 'auth-host-routing',
+      configureServer(server) {
+        server.middlewares.use((req, _res, next) => {
+          const host = req.headers.host?.split(':')[0]
+          // Check if request is coming to the auth host
+          if (host === authHost) {
+            // Only rewrite specific paths that should map to /auth/*
+            // Rewrite / and /index.html to /auth/
+            if (req.url === '/' || req.url === '/index.html') {
+              req.url = '/auth/'
+            }
+            // Rewrite /admin/* to /auth/admin/*
+            else if (req.url.startsWith('/admin/') || req.url === '/admin') {
+              req.url = '/auth' + req.url
+            }
+            // Everything else (Vite paths, passphrase links, etc.) passes through unchanged
+          }
+          next()
+        })
+      }
+    },
    {
      name: 'serve-examples',
      configureServer(server) {
        const examplesDir = resolve(__dirname, '../examples')
        const serve = sirv(examplesDir, { dev: true })
        server.middlewares.use((req, _res, next) => {
+          // Skip redirect to examples on auth host (handled by auth-host-routing)
+          const host = req.headers.host?.split(':')[0]
+          if (authHost && host === authHost) {
+            next()
+            return
+          }
          if (req.url === '/' || req.url === '/index.html') req.url = '/examples/'
          next()
        })
@@ -46,7 +88,7 @@ export default defineConfig(({ command }) => ({
        }
      }
    }
-  ],
+  ].filter(Boolean),
  resolve: {
    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }
  },
@@ -56,24 +98,6 @@ export default defineConfig(({ command }) => ({
    allowedHosts: true,
    fs: {
      allow: ['..']
-    },
-    proxy: {
-      // Only proxy these two specific backend API paths
-      '/auth/api': {
-        target: 'http://localhost:4402'
-      },
-      '/auth/ws': {
-        target: 'http://localhost:4402',
-        ws: true
-      },
-      // Passphrase links: /auth/word1.word2.word3.word4.word5
-      '^/auth/[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+$': {
-        target: 'http://localhost:4402'
-      },
-      // Passphrase links: /word1.word2.word3.word4.word5
-      '^/[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+$': {
-        target: 'http://localhost:4402'
-      }
    }
  },
  build: {
@@ -11,11 +11,10 @@ independent of any web framework:
 from datetime import datetime, timezone
 from uuid import UUID

+from paskia import db
 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

@@ -30,46 +29,10 @@ def reset_expires() -> datetime:
    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):
+    """Validate a credential reset token."""
+    record = db.get_reset_token(token)
+    if record:
        return record
    raise ValueError("This authentication link is no longer valid.")

@@ -79,11 +42,11 @@ async def get_session(token: str, host: str | None = None) -> Session:
    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):
+    session = db.get_session(token)
+    if session:
        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)
+            db.set_session_host(session.key, host)
            session.host = host
        elif session.host != host:
            raise ValueError("Session host mismatch")
@@ -93,14 +56,14 @@ async def get_session(token: str, host: str | None = None) -> Session:

 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))
+    session_record = db.get_session(token)
    if not session_record:
        raise ValueError("Session not found or expired")
-    updated = await db.instance.update_session(
-        session_key(token),
+    updated = db.update_session(
+        token,
        ip=ip,
        user_agent=user_agent,
-        renewed=datetime.now(timezone.utc),
+        expiry=expires(),
    )
    if not updated:
        raise ValueError("Session not found or expired")
@@ -109,4 +72,4 @@ async def refresh_session_token(token: str, *, ip: str, user_agent: str):
 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)
+    db.delete_credential(credential_uuid, s.user_uuid)
@@ -12,9 +12,9 @@ from datetime import datetime, timezone

 import uuid7

-from paskia import authsession, globals
+from paskia import authsession, db
 from paskia.db import Org, Permission, Role, User
-from paskia.util import hostutil, passphrase, tokens
+from paskia.util import hostutil, passphrase


 def _init_logger() -> logging.Logger:
@@ -42,9 +42,9 @@ async def _create_and_log_admin_reset_link(user_uuid, message, session_type) ->
    """Create an admin reset link and log it with the provided message."""
    token = passphrase.generate()
    expiry = authsession.reset_expires()
-    await globals.db.instance.create_reset_token(
+    db.create_reset_token(
        user_uuid=user_uuid,
-        key=tokens.reset_key(token),
+        passphrase=token,
        expiry=expiry,
        token_type=session_type,
    )
@@ -61,25 +61,32 @@ async def bootstrap_system() -> dict:
        dict: Contains information about created entities and reset link
    """
    # Create permission first - will fail if already exists
-    perm0 = Permission(id="auth:admin", display_name="Master Admin")
-    await globals.db.instance.create_permission(perm0)
+    perm0 = Permission(
+        uuid=uuid7.create(), scope="auth:admin", display_name="Master Admin"
+    )
+    db.create_permission(perm0)
+
+    # Create org admin permission - allows managing users within an org
+    perm_org_admin = Permission(
+        uuid=uuid7.create(), scope="auth:org:admin", display_name="Org Admin"
+    )
+    db.create_permission(perm_org_admin)

    org = Org(uuid7.create(), "Organization")
-    await globals.db.instance.create_organization(org)
+    db.create_organization(org)

-    # After creation, org.permissions now includes the auto-created org admin permission
-    # Allow this org to grant global admin explicitly
-    await globals.db.instance.add_permission_to_organization(str(org.uuid), perm0.id)
+    # Allow this org to grant global admin and org admin permissions
+    db.add_permission_to_organization(str(org.uuid), perm0.scope)
+    db.add_permission_to_organization(str(org.uuid), perm_org_admin.scope)

    # Create an Administration role granting both org and global admin
-    # Compose permissions for Administration role: global admin + org admin auto-perm
    role = Role(
        uuid7.create(),
        org.uuid,
        "Administration",
-        permissions=[perm0.id, *org.permissions],
+        permissions=[perm0.scope, perm_org_admin.scope],
    )
-    await globals.db.instance.create_role(role)
+    db.create_role(role)

    user = User(
        uuid=uuid7.create(),
@@ -88,7 +95,7 @@ async def bootstrap_system() -> dict:
        created_at=datetime.now(timezone.utc),
        visits=0,
    )
-    await globals.db.instance.create_user(user)
+    db.create_user(user)

    # Generate reset link and log it
    reset_link = await _create_and_log_admin_reset_link(
@@ -101,7 +108,11 @@ async def bootstrap_system() -> dict:
        "role": role,
        "permissions": [
            perm0,
-            *[Permission(id=p, display_name="") for p in org.permissions],
+            *[
+                db.get_permission_by_scope(p)
+                for p in org.permissions
+                if db.get_permission_by_scope(p)
+            ],
        ],
        "reset_link": reset_link,
    }
@@ -116,17 +127,13 @@ async def check_admin_credentials() -> bool:
    """
    try:
        # Get permission organizations to find admin users
-        permission_orgs = await globals.db.instance.get_permission_organizations(
-            "auth:admin"
-        )
+        permission_orgs = db.get_permission_organizations("auth:admin")

        if not permission_orgs:
            return False

        # Get users from the first organization with admin permission
-        org_users = await globals.db.instance.get_organization_users(
-            str(permission_orgs[0].uuid)
-        )
+        org_users = db.get_organization_users(str(permission_orgs[0].uuid))
        admin_users = [user for user, role in org_users if role == "Administration"]

        if not admin_users:
@@ -134,9 +141,7 @@ async def check_admin_credentials() -> bool:

        # Check first admin user for credentials
        admin_user = admin_users[0]
-        credentials = await globals.db.instance.get_credentials_by_user_uuid(
-            admin_user.uuid
-        )
+        credentials = db.get_credentials_by_user_uuid(admin_user.uuid)

        if not credentials:
            # Admin exists but has no credentials, create reset link
@@ -162,7 +167,7 @@ async def bootstrap_if_needed() -> bool:
    """
    try:
        # Check if the admin permission exists - if it does, system is already bootstrapped
-        await globals.db.instance.get_permission("auth:admin")
+        db.get_permission("auth:admin")
        # Permission exists, system is already bootstrapped
        # Check if admin needs credentials (only for already-bootstrapped systems)
        await check_admin_credentials()
@@ -22,4 +22,3 @@ class PaskiaConfig:
    host: str | None = None
    port: int | None = None
    uds: str | None = None
-    devmode: bool = False
@@ -1,415 +1,178 @@
 """
 Database module for WebAuthn passkey authentication.

-This module provides dataclasses and database abstractions for managing
-users, credentials, and sessions in a WebAuthn authentication system.
+Read: Access _db._data directly, use build_* to convert to public structs.
+CTX: get_session_context(key) returns SessionContext with effective permissions.
+Write: Functions validate and commit, or raise ValueError.
+
+Usage:
+    from paskia import db
+
+    # Read (after init)
+    user_data = db._db._data.users[user_uuid]
+    user = db.build_user(user_uuid)
+
+    # Context
+    ctx = db.get_session_context(session_key)
+
+    # Write
+    db.create_user(user)
 """

-from abc import ABC, abstractmethod
-from dataclasses import dataclass, field
-from datetime import datetime
-from uuid import UUID
-
-
-@dataclass
-class Permission:
-    id: str  # String primary key (max 128 chars)
-    display_name: str
-
-
-@dataclass
-class Role:
-    uuid: UUID
-    org_uuid: UUID
-    display_name: str
-    # List of permission IDs this role grants to its members
-    permissions: list[str] = field(default_factory=list)  # permission IDs
-
-
-@dataclass
-class Org:
-    uuid: UUID
-    display_name: str
-    # All permission IDs that the Org is allowed to grant to its roles
-    permissions: list[str] = field(default_factory=list)  # permission IDs
-    # Roles belonging to this org
-    roles: list[Role] = field(default_factory=list)
-
-
-@dataclass
-class User:
-    uuid: UUID
-    display_name: str
-    role_uuid: UUID
-    created_at: datetime | None = None
-    last_seen: datetime | None = None
-    visits: int = 0
-
-
-@dataclass
-class Credential:
-    uuid: UUID
-    credential_id: bytes  # Long binary ID passed from the authenticator
-    user_uuid: UUID
-    aaguid: UUID
-    public_key: bytes
-    sign_count: int
-    created_at: datetime
-    last_used: datetime | None = None
-    last_verified: datetime | None = None
-
-
-@dataclass
-class Session:
-    key: bytes
-    user_uuid: UUID
-    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
-class SessionContext:
-    session: Session
-    user: User
-    org: Org
-    role: Role
-    credential: Credential | None = None
-    permissions: list[Permission] | None = None
-
-
-class DatabaseInterface(ABC):
-    """Abstract base class defining the database interface.
-
-    This class defines the public API that database implementations should provide.
-    Implementations may use decorators like @with_session that modify method signatures
-    at runtime, so this interface focuses on the logical operations rather than
-    exact parameter matching.
-    """
-
-    @abstractmethod
-    async def init_db(self) -> None:
-        """Initialize database tables."""
-        pass
-
-    # User operations
-    @abstractmethod
-    async def get_user_by_uuid(self, user_uuid: UUID) -> User:
-        """Get user record by WebAuthn user UUID."""
-
-    @abstractmethod
-    async def create_user(self, user: User) -> None:
-        """Create a new user."""
-
-    @abstractmethod
-    async def update_user_display_name(
-        self, user_uuid: UUID, display_name: str
-    ) -> None:
-        """Update a user's display name."""
-
-    # Role operations
-    @abstractmethod
-    async def create_role(self, role: Role) -> None:
-        """Create new role."""
-
-    @abstractmethod
-    async def update_role(self, role: Role) -> None:
-        """Update a role's display name and synchronize its permissions."""
-
-    @abstractmethod
-    async def delete_role(self, role_uuid: UUID) -> None:
-        """Delete a role by UUID. Implementations may prevent deletion if users exist."""
-
-    # Credential operations
-    @abstractmethod
-    async def create_credential(self, credential: Credential) -> None:
-        """Store a credential for a user."""
-
-    @abstractmethod
-    async def get_credential_by_id(self, credential_id: bytes) -> Credential:
-        """Get credential by credential ID."""
-
-    @abstractmethod
-    async def get_credentials_by_user_uuid(self, user_uuid: UUID) -> list[bytes]:
-        """Get all credential IDs for a user."""
-
-    @abstractmethod
-    async def update_credential(self, credential: Credential) -> None:
-        """Update the sign count, created_at, last_used, and last_verified for a credential."""
-
-    @abstractmethod
-    async def delete_credential(self, uuid: UUID, user_uuid: UUID) -> None:
-        """Delete a specific credential for a user."""
-
-    # Session operations
-    @abstractmethod
-    async def create_session(
-        self,
-        user_uuid: UUID,
-        key: bytes,
-        credential_uuid: UUID,
-        host: str,
-        ip: str,
-        user_agent: str,
-        renewed: datetime,
-    ) -> None:
-        """Create a new session."""
-
-    @abstractmethod
-    async def get_session(self, key: bytes) -> Session | None:
-        """Get session by key."""
-
-    @abstractmethod
-    async def delete_session(self, key: bytes) -> None:
-        """Delete session by key."""
-
-    @abstractmethod
-    async def update_session(
-        self,
-        key: bytes,
-        *,
-        ip: str,
-        user_agent: str,
-        renewed: datetime,
-    ) -> Session | None:
-        """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:
-        """Add a new organization."""
-
-    @abstractmethod
-    async def get_organization(self, org_id: str) -> Org:
-        """Get organization by ID, including its permission IDs and roles (with their permission IDs)."""
-
-    @abstractmethod
-    async def list_organizations(self) -> list[Org]:
-        """List all organizations with their roles and permission IDs."""
-
-    @abstractmethod
-    async def update_organization(self, org: Org) -> None:
-        """Update organization options."""
-
-    @abstractmethod
-    async def delete_organization(self, org_uuid: UUID) -> None:
-        """Delete organization by ID."""
-
-    @abstractmethod
-    async def add_user_to_organization(
-        self, user_uuid: UUID, org_id: str, role: str
-    ) -> None:
-        """Set a user's organization and role."""
-
-    @abstractmethod
-    async def transfer_user_to_organization(
-        self, user_uuid: UUID, new_org_id: str, new_role: str | None = None
-    ) -> None:
-        """Transfer a user to another organization with an optional role."""
-
-    @abstractmethod
-    async def get_user_organization(self, user_uuid: UUID) -> tuple[Org, str]:
-        """Get the organization and role for a user."""
-
-    @abstractmethod
-    async def get_organization_users(self, org_id: str) -> list[tuple[User, str]]:
-        """Get all users in an organization with their roles."""
-
-    @abstractmethod
-    async def get_roles_by_organization(self, org_id: str) -> list[Role]:
-        """List roles belonging to an organization."""
-
-    @abstractmethod
-    async def get_user_role_in_organization(
-        self, user_uuid: UUID, org_id: str
-    ) -> str | None:
-        """Get a user's role in a specific organization."""
-
-    @abstractmethod
-    async def update_user_role_in_organization(
-        self, user_uuid: UUID, new_role: str
-    ) -> None:
-        """Update a user's role in their organization."""
-
-    # Permission operations
-    @abstractmethod
-    async def create_permission(self, permission: Permission) -> None:
-        """Create a new permission."""
-
-    @abstractmethod
-    async def get_permission(self, permission_id: str) -> Permission:
-        """Get permission by ID."""
-
-    @abstractmethod
-    async def list_permissions(self) -> list[Permission]:
-        """List all permissions."""
-
-    @abstractmethod
-    async def update_permission(self, permission: Permission) -> None:
-        """Update permission details."""
-
-    @abstractmethod
-    async def delete_permission(self, permission_id: str) -> None:
-        """Delete permission by ID."""
-
-    @abstractmethod
-    async def rename_permission(
-        self, old_id: str, new_id: str, display_name: str
-    ) -> None:
-        """Rename a permission's ID (and display name) updating all references.
-
-        This must update:
-            - permissions.id (primary key)
-            - org_permissions.permission_id
-            - role_permissions.permission_id
-        """
-
-    @abstractmethod
-    async def add_permission_to_organization(
-        self, org_id: str, permission_id: str
-    ) -> None:
-        """Add a permission to an organization."""
-
-    @abstractmethod
-    async def remove_permission_from_organization(
-        self, org_id: str, permission_id: str
-    ) -> None:
-        """Remove a permission from an organization."""
-
-    @abstractmethod
-    async def get_organization_permissions(self, org_id: str) -> list[Permission]:
-        """Get all permissions assigned to an organization."""
-
-    @abstractmethod
-    async def get_permission_organizations(self, permission_id: str) -> list[Org]:
-        """Get all organizations that have a specific permission."""
-
-    # Role-permission operations
-    @abstractmethod
-    async def add_permission_to_role(self, role_uuid: UUID, permission_id: str) -> None:
-        """Add a permission to a role."""
-
-    @abstractmethod
-    async def remove_permission_from_role(
-        self, role_uuid: UUID, permission_id: str
-    ) -> None:
-        """Remove a permission from a role."""
-
-    @abstractmethod
-    async def get_role_permissions(self, role_uuid: UUID) -> list[Permission]:
-        """List all permissions granted to a role."""
-
-    @abstractmethod
-    async def get_permission_roles(self, permission_id: str) -> list[Role]:
-        """List all roles that grant a permission."""
-
-    @abstractmethod
-    async def get_role(self, role_uuid: UUID) -> Role:
-        """Get a role by UUID, including its permission IDs."""
-
-    # Combined operations
-    @abstractmethod
-    async def login(self, user_uuid: UUID, credential: Credential) -> None:
-        """Update user and credential timestamps after successful login."""
-
-    @abstractmethod
-    async def create_user_and_credential(
-        self, user: User, credential: Credential
-    ) -> None:
-        """Create a new user and their first credential in a transaction."""
-
-    @abstractmethod
-    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
-    @abstractmethod
-    async def create_credential_session(
-        self,
-        user_uuid: UUID,
-        credential: Credential,
-        reset_key: bytes | None,
-        session_key: bytes,
-        *,
-        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 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)
-        """
-
+from paskia.db.background import (
+    start_background,
+    start_cleanup,
+    stop_background,
+    stop_cleanup,
+)
+from paskia.db.operations import (
+    DB,
+    _db,
+    add_permission_to_organization,
+    add_permission_to_role,
+    build_credential,
+    build_org,
+    build_permission,
+    build_reset_token,
+    build_role,
+    build_session,
+    build_user,
+    cleanup_expired,
+    create_credential,
+    create_credential_session,
+    create_organization,
+    create_permission,
+    create_reset_token,
+    create_role,
+    create_session,
+    create_user,
+    delete_credential,
+    delete_organization,
+    delete_permission,
+    delete_reset_token,
+    delete_role,
+    delete_session,
+    delete_sessions_for_user,
+    delete_user,
+    get_credential_by_id,
+    get_credentials_by_user_uuid,
+    get_organization,
+    get_organization_users,
+    get_permission,
+    get_permission_by_scope,
+    get_permission_organizations,
+    get_reset_token,
+    get_role,
+    get_roles_by_organization,
+    get_session,
+    get_session_context,
+    get_user_by_uuid,
+    get_user_organization,
+    init,
+    list_organizations,
+    list_permissions,
+    list_sessions_for_user,
+    login,
+    remove_permission_from_organization,
+    remove_permission_from_role,
+    rename_permission,
+    set_session_host,
+    update_credential_sign_count,
+    update_organization_name,
+    update_permission,
+    update_role_name,
+    update_session,
+    update_user_display_name,
+    update_user_role,
+    update_user_role_in_organization,
+)
+from paskia.db.structs import (
+    Credential,
+    Org,
+    Permission,
+    ResetToken,
+    Role,
+    Session,
+    SessionContext,
+    User,
+)

 __all__ = [
-    "User",
+    # Types
    "Credential",
-    "Session",
-    "ResetToken",
-    "SessionContext",
+    "DB",
    "Org",
-    "Role",
    "Permission",
-    "DatabaseInterface",
+    "ResetToken",
+    "Role",
+    "Session",
+    "SessionContext",
+    "User",
+    # Instance
+    "_db",
+    "init",
+    # Background
+    "start_background",
+    "stop_background",
+    "start_cleanup",
+    "stop_cleanup",
+    # Builders
+    "build_credential",
+    "build_org",
+    "build_permission",
+    "build_reset_token",
+    "build_role",
+    "build_session",
+    "build_user",
+    # Read ops
+    "get_credential_by_id",
+    "get_credentials_by_user_uuid",
+    "get_organization",
+    "get_organization_users",
+    "get_permission",
+    "get_permission_by_scope",
+    "get_permission_organizations",
+    "get_reset_token",
+    "get_role",
+    "get_roles_by_organization",
+    "get_session",
+    "get_session_context",
+    "get_user_by_uuid",
+    "get_user_organization",
+    "list_organizations",
+    "list_permissions",
+    "list_sessions_for_user",
+    # Write ops
+    "add_permission_to_organization",
+    "add_permission_to_role",
+    "cleanup_expired",
+    "create_credential",
+    "create_credential_session",
+    "create_organization",
+    "create_permission",
+    "create_reset_token",
+    "create_role",
+    "create_session",
+    "create_user",
+    "delete_credential",
+    "delete_organization",
+    "delete_permission",
+    "delete_reset_token",
+    "delete_role",
+    "delete_session",
+    "delete_sessions_for_user",
+    "delete_user",
+    "login",
+    "remove_permission_from_organization",
+    "remove_permission_from_role",
+    "rename_permission",
+    "set_session_host",
+    "update_credential_sign_count",
+    "update_organization_name",
+    "update_permission",
+    "update_role_name",
+    "update_session",
+    "update_user_display_name",
+    "update_user_role",
+    "update_user_role_in_organization",
 ]
@@ -0,0 +1,128 @@
+"""
+Background task for database maintenance.
+
+Periodically flushes pending changes to disk and cleans up expired items.
+"""
+
+import asyncio
+import logging
+from datetime import datetime, timezone
+
+from paskia.db.jsonl import flush_changes
+
+# Flush changes to disk every N seconds
+FLUSH_INTERVAL = 1
+# Cleanup expired items every N seconds (cheap when nothing to remove)
+CLEANUP_INTERVAL = 1
+
+
+_logger = logging.getLogger(__name__)
+_background_task: asyncio.Task | None = None
+
+
+def cleanup() -> None:
+    """Remove expired sessions and reset tokens from the database."""
+    from paskia.db.operations import _db
+
+    if _db is None or _db._data is None:
+        return
+
+    with _db.transaction("expiry"):
+        current_time = datetime.now(timezone.utc)
+
+        # Clean expired sessions
+        to_delete_sessions = [
+            k for k, s in _db._data.sessions.items() if s.expiry < current_time
+        ]
+        for k in to_delete_sessions:
+            del _db._data.sessions[k]
+
+        # Clean expired reset tokens
+        to_delete_tokens = [
+            k for k, t in _db._data.reset_tokens.items() if t.expiry < current_time
+        ]
+        for k in to_delete_tokens:
+            del _db._data.reset_tokens[k]
+
+
+async def flush() -> None:
+    """Write all pending database changes to disk."""
+    from paskia.db.operations import _db
+
+    if _db is None:
+        _logger.warning("flush() called but _db is None")
+        return
+    await flush_changes(_db.db_path, _db._pending_changes)
+
+
+async def _background_loop():
+    """Background task that periodically flushes changes and cleans up."""
+    # Run cleanup immediately on startup to clear old expired items
+    cleanup()
+    await flush()
+
+    last_cleanup = datetime.now(timezone.utc)
+
+    while True:
+        try:
+            await asyncio.sleep(FLUSH_INTERVAL)
+            # Flush pending changes to disk
+            await flush()
+
+            # Run cleanup less frequently
+            now = datetime.now(timezone.utc)
+            if (now - last_cleanup).total_seconds() >= CLEANUP_INTERVAL:
+                cleanup()
+                await flush()  # Flush cleanup changes
+                last_cleanup = now
+        except asyncio.CancelledError:
+            # Final flush before exit
+            await flush()
+            break
+        except Exception:
+            _logger.debug("Error in database background loop", exc_info=True)
+
+
+async def start_background():
+    """Start the background flush/cleanup task."""
+    global _background_task
+
+    # Check if task exists but is no longer running (e.g., after uvicorn reload)
+    if _background_task is not None:
+        if _background_task.done():
+            _logger.debug("Previous background task was done, restarting")
+            _background_task = None
+        else:
+            # Task exists and is running - but might be in a dead event loop
+            try:
+                # Check if task is in current event loop
+                loop = asyncio.get_running_loop()
+                task_loop = _background_task.get_loop()
+                if loop is not task_loop:
+                    _logger.debug("Background task in different event loop, restarting")
+                    _background_task = None
+            except Exception as e:
+                _logger.debug("Error checking background task loop: %s, restarting", e)
+                _background_task = None
+
+    if _background_task is None:
+        _background_task = asyncio.create_task(_background_loop())
+    else:
+        _logger.debug("Background task already running: %s", _background_task)
+
+
+async def stop_background():
+    """Stop the background task and flush any pending changes."""
+    global _background_task
+    if _background_task:
+        _background_task.cancel()
+        try:
+            await _background_task
+        except asyncio.CancelledError:
+            pass
+        _background_task = None
+
+
+# Aliases for backwards compatibility
+start_cleanup = start_background
+stop_cleanup = stop_background
@@ -0,0 +1,132 @@
+"""
+JSONL persistence layer for the database.
+
+Handles file I/O, JSON diffs, and persistence. Works with plain JSON/dict data.
+Uses aiofiles for async I/O operations.
+"""
+
+import logging
+from collections import deque
+from datetime import datetime, timezone
+from pathlib import Path
+
+import aiofiles
+import jsondiff
+import msgspec
+
+_logger = logging.getLogger(__name__)
+
+# Default database path
+DB_PATH_DEFAULT = "paskia.jsonl"
+
+
+class _ChangeRecord(msgspec.Struct, omit_defaults=True):
+    """A single change record in the JSONL file."""
+
+    ts: datetime
+    a: str  # action - describes the operation (e.g., "migrate", "login", "create_user")
+    u: str | None = None  # user UUID who performed the action (None for system)
+    diff: dict = {}
+
+
+# msgspec encoder for change records
+_change_encoder = msgspec.json.Encoder()
+
+
+async def load_jsonl(db_path: Path) -> dict:
+    """Load data from disk by applying change log.
+
+    Replays all changes from JSONL file using plain dicts (to handle
+    schema evolution).
+
+    Args:
+        db_path: Path to the JSONL database file
+
+    Returns:
+        The final state after applying all changes
+
+    Raises:
+        ValueError: If file doesn't exist or cannot be loaded
+    """
+    if not db_path.exists():
+        raise ValueError(f"Database file not found: {db_path}")
+    data_dict: dict = {}
+    try:
+        # Read entire file at once and split into lines
+        async with aiofiles.open(db_path, "rb") as f:
+            content = await f.read()
+        for line_num, line in enumerate(content.split(b"\n"), 1):
+            line = line.strip()
+            if not line:
+                continue
+            try:
+                change = msgspec.json.decode(line)
+                # Apply the diff to current state (marshal=True for $-prefixed keys)
+                data_dict = jsondiff.patch(data_dict, change["diff"], marshal=True)
+            except Exception as e:
+                raise ValueError(f"Error parsing line {line_num}: {e}")
+    except (OSError, ValueError, msgspec.DecodeError) as e:
+        raise ValueError(f"Failed to load database: {e}")
+    return data_dict
+
+
+def compute_diff(previous: dict, current: dict) -> dict | None:
+    """Compute JSON diff between two states.
+
+    Args:
+        previous: Previous state (JSON-compatible dict)
+        current: Current state (JSON-compatible dict)
+
+    Returns:
+        The diff, or None if no changes
+    """
+    diff = jsondiff.diff(previous, current, marshal=True)
+    return diff if diff else None
+
+
+def create_change_record(
+    action: str, diff: dict, user: str | None = None
+) -> _ChangeRecord:
+    """Create a change record for persistence."""
+    return _ChangeRecord(
+        ts=datetime.now(timezone.utc),
+        a=action,
+        u=user,
+        diff=diff,
+    )
+
+
+async def flush_changes(
+    db_path: Path,
+    pending_changes: deque[_ChangeRecord],
+) -> bool:
+    """Write all pending changes to disk.
+
+    Args:
+        db_path: Path to the JSONL database file
+        pending_changes: Queue of pending change records (will be cleared on success)
+
+    Returns:
+        True if flush succeeded, False otherwise
+    """
+    if not pending_changes:
+        return True
+
+    # Collect all pending changes
+    changes_to_write = list(pending_changes)
+    pending_changes.clear()
+
+    try:
+        # Build lines to append (keep as bytes, join with \n)
+        lines = [_change_encoder.encode(change) for change in changes_to_write]
+
+        # Append all lines in a single write (binary mode for Windows compatibility)
+        async with aiofiles.open(db_path, "ab") as f:
+            await f.write(b"\n".join(lines) + b"\n")
+        return True
+    except OSError:
+        _logger.exception("Failed to flush database changes")
+        # Re-queue the changes on failure
+        for change in reversed(changes_to_write):
+            pending_changes.appendleft(change)
+        return False
@@ -0,0 +1,148 @@
+from datetime import datetime
+from uuid import UUID
+
+import msgspec
+
+
+class Permission(msgspec.Struct, omit_defaults=True):
+    uuid: UUID  # UUID primary key
+    scope: str  # Permission scope identifier (e.g. "auth:admin", "myapp:write")
+    display_name: str
+    domain: str | None = None  # If set, scopes permission to this domain
+
+
+class Role(msgspec.Struct):
+    uuid: UUID
+    org_uuid: UUID
+    display_name: str
+    permissions: list[str] = []  # permission UUIDs this role grants
+
+
+class Org(msgspec.Struct):
+    uuid: UUID
+    display_name: str
+    permissions: list[str] = []  # permission UUIDs this org can grant
+    roles: list[Role] = []  # roles belonging to this org
+
+
+class User(msgspec.Struct):
+    uuid: UUID
+    display_name: str
+    role_uuid: UUID
+    created_at: datetime | None = None
+    last_seen: datetime | None = None
+    visits: int = 0
+
+
+class Credential(msgspec.Struct):
+    uuid: UUID
+    credential_id: bytes  # Long binary ID from the authenticator
+    user_uuid: UUID
+    aaguid: UUID
+    public_key: bytes
+    sign_count: int
+    created_at: datetime
+    last_used: datetime | None = None
+    last_verified: datetime | None = None
+
+
+class Session(msgspec.Struct):
+    key: str
+    user_uuid: UUID
+    credential_uuid: UUID
+    host: str | None
+    ip: str | None
+    user_agent: str | None
+    expiry: datetime
+
+    def metadata(self) -> dict:
+        """Return session metadata for backwards compatibility."""
+        return {
+            "ip": self.ip,
+            "user_agent": self.user_agent,
+            "expiry": self.expiry.isoformat(),
+        }
+
+
+class ResetToken(msgspec.Struct):
+    key: bytes
+    user_uuid: UUID
+    expiry: datetime
+    token_type: str
+
+
+class SessionContext(msgspec.Struct):
+    session: Session
+    user: User
+    org: Org
+    role: Role
+    credential: Credential | None = None
+    permissions: list[Permission] | None = None
+
+
+# -------------------------------------------------------------------------
+# Internal storage types (different structure for efficient storage)
+# -------------------------------------------------------------------------
+
+
+class _PermissionData(msgspec.Struct, omit_defaults=True):
+    scope: str  # Permission scope identifier
+    display_name: str
+    domain: str | None = None
+    orgs: dict[UUID, bool] = {}  # org_uuid -> True (which orgs can grant this)
+
+
+class _OrgData(msgspec.Struct):
+    display_name: str
+    created_at: datetime | None = None
+
+
+class _RoleData(msgspec.Struct):
+    org: UUID
+    display_name: str
+    permissions: dict[UUID, bool] = {}  # permission_uuid -> True
+
+
+class _UserData(msgspec.Struct):
+    display_name: str
+    role: UUID
+    created_at: datetime
+    last_seen: datetime | None
+    visits: int
+
+
+class _CredentialData(msgspec.Struct):
+    credential_id: bytes
+    user: UUID
+    aaguid: UUID
+    public_key: bytes
+    sign_count: int
+    created_at: datetime
+    last_used: datetime | None
+    last_verified: datetime | None
+
+
+class _SessionData(msgspec.Struct):
+    user: UUID
+    credential: UUID
+    host: str | None
+    ip: str | None
+    user_agent: str | None
+    expiry: datetime
+
+
+class _ResetTokenData(msgspec.Struct):
+    user: UUID
+    expiry: datetime
+    token_type: str
+
+
+class _DatabaseData(msgspec.Struct, omit_defaults=True):
+    permissions: dict[UUID, _PermissionData]
+    orgs: dict[UUID, _OrgData]
+    roles: dict[UUID, _RoleData]
+    users: dict[UUID, _UserData]
+    credentials: dict[UUID, _CredentialData]
+    sessions: dict[str, _SessionData]
+    reset_tokens: dict[bytes, _ResetTokenData]
+    v: int = 0
@@ -1,16 +1,31 @@
 import argparse
 import asyncio
-import ipaddress
+import json
 import logging
 import os
 from urllib.parse import urlparse

 import uvicorn
+from fastapi_vue.hostutil import parse_endpoint
+from uvicorn import Config, Server

+from paskia import globals as _globals
+from paskia.bootstrap import bootstrap_if_needed
+from paskia.config import PaskiaConfig
+from paskia.fastapi import app as fastapi_app
+from paskia.fastapi import reset as reset_cmd
+from paskia.util import startupbox
 from paskia.util.hostutil import normalize_origin

-DEFAULT_HOST = "localhost"
-DEFAULT_SERVE_PORT = 4401
+DEFAULT_PORT = 4401
+
+EPILOG = """\
+Examples:
+  paskia                      # localhost:4401
+  paskia :8080                # All interfaces, port 8080
+  paskia unix:/tmp/paskia.sock
+  paskia reset [user]         # Generate passkey reset link
+"""


 def is_subdomain(sub: str, domain: str) -> bool:
@@ -34,80 +49,6 @@ def validate_auth_host(auth_host: str, rp_id: str) -> None:
        )


-def parse_endpoint(
-    value: str | None, default_port: int
-) -> tuple[str | None, int | None, str | None, bool]:
-    """Parse an endpoint using stdlib (urllib.parse, ipaddress).
-
-    Returns (host, port, uds_path). If uds_path is not None, host/port are None.
-
-    Supported forms:
-    - host[:port]
-    - :port (uses default host)
-    - [ipv6][:port] (bracketed for port usage)
-    - ipv6 (unbracketed, no port allowed -> default port)
-    - unix:/path/to/socket.sock
-    - None -> defaults (localhost:4401)
-
-    Notes:
-    - For IPv6 with an explicit port you MUST use brackets (e.g. [::1]:8080)
-    - Unbracketed IPv6 like ::1 implies the default port.
-    """
-    if not value:
-        return DEFAULT_HOST, default_port, None, False
-
-    # Port only (numeric) -> localhost:port
-    if value.isdigit():
-        try:
-            port_only = int(value)
-        except ValueError:  # pragma: no cover (isdigit guards)
-            raise SystemExit(f"Invalid port '{value}'")
-        return DEFAULT_HOST, port_only, None, False
-
-    # Leading colon :port -> bind all interfaces (0.0.0.0 + ::)
-    if value.startswith(":") and value != ":":
-        port_part = value[1:]
-        if not port_part.isdigit():
-            raise SystemExit(f"Invalid port in '{value}'")
-        return None, int(port_part), None, True
-
-    # UNIX domain socket
-    if value.startswith("unix:"):
-        uds_path = value[5:] or None
-        if uds_path is None:
-            raise SystemExit("unix: path must not be empty")
-        return None, None, uds_path, False
-
-    # Unbracketed IPv6 (cannot safely contain a port) -> detect by multiple colons
-    if value.count(":") > 1 and not value.startswith("["):
-        try:
-            ipaddress.IPv6Address(value)
-        except ValueError as e:  # pragma: no cover
-            raise SystemExit(f"Invalid IPv6 address '{value}': {e}")
-        return value, default_port, None, False
-
-    # Use urllib.parse for everything else (host[:port], :port, [ipv6][:port])
-    parsed = urlparse(f"//{value}")  # // prefix lets urlparse treat it as netloc
-    host = parsed.hostname
-    port = parsed.port
-
-    # Host may be None if empty (e.g. ':5500')
-    if not host:
-        host = DEFAULT_HOST
-    if port is None:
-        port = default_port
-
-    # Validate IP literals (optional; hostname passes through)
-    try:
-        # Strip brackets if somehow present (urlparse removes them already)
-        ipaddress.ip_address(host)
-    except ValueError:
-        # Not an IP address -> treat as hostname; no action
-        pass
-
-    return host, port, None, False
-
-
 def add_common_options(p: argparse.ArgumentParser) -> None:
    p.add_argument(
        "--rp-id", default="localhost", help="Relying Party ID (default: localhost)"
@@ -134,45 +75,44 @@ def main():
    logging.basicConfig(level=logging.INFO, format="%(message)s", force=True)

    parser = argparse.ArgumentParser(
-        prog="paskia", description="Paskia authentication server"
+        prog="paskia",
+        description="Paskia authentication server",
+        formatter_class=argparse.RawDescriptionHelpFormatter,
+        epilog=EPILOG,
    )
-    sub = parser.add_subparsers(dest="command", required=True)

-    # serve subcommand
-    serve = sub.add_parser(
-        "serve", help="Run the server (production style, no auto-reload)"
-    )
-    serve.add_argument(
+    # Primary argument: either host:port or "reset" subcommand
+    parser.add_argument(
        "hostport",
        nargs="?",
        help=(
            "Endpoint (default: localhost:4401). Forms: host[:port] | :port | "
-            "[ipv6][:port] | ipv6 | unix:/path.sock"
+            "[ipv6][:port] | ipv6 | unix:/path.sock | 'reset' for credential reset"
        ),
    )
-    add_common_options(serve)
-
-    # reset subcommand
-    reset = sub.add_parser(
-        "reset",
-        help=(
-            "Create a credential reset link for a user. Provide part of the display name or UUID. "
-            "If omitted, targets the master admin (first Administration role user in an auth:admin org)."
-        ),
-    )
-    reset.add_argument(
-        "query",
+    parser.add_argument(
+        "reset_query",
        nargs="?",
-        help="User UUID (full) or case-insensitive substring of display name. If omitted, master admin is used.",
+        help="For 'reset' command: user UUID or substring of display name",
    )
-    add_common_options(reset)
+    add_common_options(parser)

    args = parser.parse_args()

-    if args.command == "serve":
-        host, port, uds, all_ifaces = parse_endpoint(args.hostport, DEFAULT_SERVE_PORT)
+    # Detect "reset" subcommand (first positional is "reset")
+    is_reset = args.hostport == "reset"
+
+    if is_reset:
+        endpoints = []
    else:
-        host = port = uds = all_ifaces = None  # type: ignore
+        # Parse endpoint using fastapi_vue.hostutil
+        endpoints = parse_endpoint(args.hostport, DEFAULT_PORT)
+
+    # Extract host/port/uds from first endpoint for config display and site_url
+    ep = endpoints[0] if endpoints else {}
+    host = ep.get("host")
+    port = ep.get("port")
+    uds = ep.get("uds")

    # Collect and normalize origins, handle auth_host
    origins = [normalize_origin(o) for o in (getattr(args, "origins", None) or [])]
@@ -185,12 +125,21 @@ def main():

        # If origins are configured, ensure auth_host is included at top
        if origins:
-            # Insert auth_host at the beginning (Passkey.__init__ will dedupe)
+            # 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:
+    # Priority: PASKIA_SITE_URL (explicit) > auth_host > first origin with localhost > http://localhost:port
+    explicit_site_url = os.environ.get("PASKIA_SITE_URL")
+    if explicit_site_url:
+        # Explicit site URL from devserver or deployment config
+        site_url = explicit_site_url.rstrip("/")
+        site_path = "/" if args.auth_host else "/auth/"
+    elif args.auth_host:
        site_url = args.auth_host.rstrip("/")
        site_path = "/"
    elif origins:
@@ -211,8 +160,6 @@ def main():
        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,
@@ -226,8 +173,6 @@ def main():
    )

    # Export configuration via single JSON env variable for worker processes
-    import json
-
    config_json = {
        "rp_id": config.rp_id,
        "rp_name": config.rp_name,
@@ -239,8 +184,6 @@ def main():
    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=config.rp_id,
@@ -251,80 +194,45 @@ def main():
    )

    # 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 paskia.fastapi import reset as reset_cmd  # local import
-
-        exit_code = reset_cmd.run(getattr(args, "query", None))
+    # Handle reset command (no server start)
+    if is_reset:
+        exit_code = reset_cmd.run(args.reset_query)
        raise SystemExit(exit_code)

-    if args.command == "serve":
-        run_kwargs: dict = {
-            "log_level": "info",
-        }
+    # Dev mode: enable reload when FASTAPI_VUE_FRONTEND_URL is set
+    devmode = bool(os.environ.get("FASTAPI_VUE_FRONTEND_URL"))

-        # 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"
+    run_kwargs: dict = {
+        "log_level": "info",
+    }

-        if uds:
-            run_kwargs["uds"] = uds
-        else:
-            if not all_ifaces:
-                run_kwargs["host"] = host
-                run_kwargs["port"] = port
+    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 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("paskia.fastapi:app", **run_kwargs)
-            else:
-                # Production: run separate servers for IPv4 and IPv6
-                from uvicorn import Config, Server  # noqa: E402 local import
+    if len(endpoints) > 1:
+        # Run separate servers for multiple endpoints (e.g. IPv4 + IPv6)
+        async def serve_all():
+            async with asyncio.TaskGroup() as tg:
+                for ep in endpoints:
+                    tg.create_task(
+                        Server(Config(app=fastapi_app, **run_kwargs, **ep)).serve()
+                    )

-                from paskia.fastapi import (
-                    app as fastapi_app,  # noqa: E402 local import
-                )
-
-                async def serve_both():
-                    servers = []
-                    assert port is not None
-                    for h in ("0.0.0.0", "::"):
-                        try:
-                            cfg = Config(
-                                app=fastapi_app,
-                                host=h,
-                                port=port,
-                                log_level="info",
-                            )
-                            servers.append(Server(cfg))
-                        except Exception as e:  # pragma: no cover
-                            logging.warning(f"Failed to configure server for {h}: {e}")
-                    tasks = [asyncio.create_task(s.serve()) for s in servers]
-                    await asyncio.gather(*tasks)
-
-                asyncio.run(serve_both())
-        else:
-            uvicorn.run("paskia.fastapi:app", **run_kwargs)
+        asyncio.run(serve_all())
+    else:
+        uvicorn.run("paskia.fastapi:app", **run_kwargs, **endpoints[0])


 if __name__ == "__main__":
@@ -13,19 +13,17 @@ from fastapi import (
 from fastapi.responses import JSONResponse
 from fastapi.security import HTTPBearer

+from paskia import db
 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
+from paskia.util import hostutil, htmlutil, passphrase, userinfo, vitedev

 bearer_auth = HTTPBearer(auto_error=True)

@@ -77,6 +75,7 @@ async def validate_token(
    request: Request,
    response: Response,
    perm: list[str] = Query([]),
+    max_age: str | None = Query(None),
    auth=AUTH_COOKIE,
 ):
    """Validate the current session and extend its expiry.
@@ -86,14 +85,18 @@ async def validate_token(
    refresh endpoint.
    """
    try:
-        ctx = await authz.verify(auth, perm, host=request.headers.get("host"))
+        ctx = await authz.verify(
+            auth,
+            perm,
+            host=request.headers.get("host"),
+            max_age=max_age,
+        )
    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))
+        consumed = EXPIRES - (ctx.session.expiry - datetime.now(timezone.utc))
        if not timedelta(0) < consumed < _REFRESH_INTERVAL:
            try:
                await refresh_session_token(
@@ -143,7 +146,7 @@ async def forward_authentication(
        )
        role_permissions = set(ctx.role.permissions or [])
        if ctx.permissions:
-            role_permissions.update(permission.id for permission in ctx.permissions)
+            role_permissions.update(permission.scope for permission in ctx.permissions)

        remote_headers: dict[str, str] = {
            "Remote-User": str(ctx.user.uuid),
@@ -154,13 +157,11 @@ async def forward_authentication(
            "Remote-Role": str(ctx.role.uuid),
            "Remote-Role-Name": ctx.role.display_name,
            "Remote-Session-Expires": (
-                session_expiry(ctx.session)
-                .astimezone(timezone.utc)
+                ctx.session.expiry.astimezone(timezone.utc)
                .isoformat()
                .replace("+00:00", "Z")
-                if session_expiry(ctx.session).tzinfo
-                else session_expiry(ctx.session)
-                .replace(tzinfo=timezone.utc)
+                if ctx.session.expiry.tzinfo
+                else ctx.session.expiry.replace(tzinfo=timezone.utc)
                .isoformat()
                .replace("+00:00", "Z")
            ),
@@ -179,7 +180,7 @@ async def forward_authentication(
        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 = (await vitedev.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"
@@ -221,7 +222,7 @@ async def api_token_info(token: str):
    # 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)
+        user = db.get_user_by_uuid(reset_token.user_uuid)
        return {
            "type": "reset",
            "user_name": user.display_name,
@@ -287,11 +288,11 @@ 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"))
+        _s = 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))
+        db.delete_session(auth)
    session.clear_session_cookie(response)
    return {"message": "Logged out successfully"}

@@ -94,14 +94,19 @@ async def verify(

    if not match(ctx, perm):
        # Determine which permissions are missing for clearer diagnostics
-        missing = sorted(set(perm) - set(ctx.role.permissions))
+        effective_scopes = (
+            {p.scope for p in (ctx.permissions or [])}
+            if ctx.permissions
+            else set(ctx.role.permissions or [])
+        )
+        missing = sorted(set(perm) - effective_scopes)
        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,
+            list(effective_scopes),
        )
        raise AuthException(
            status_code=403, mode="forbidden", detail="Permission required"
@@ -5,11 +5,18 @@ from pathlib import Path

 from fastapi import FastAPI, HTTPException, Request, Response
 from fastapi.responses import FileResponse, RedirectResponse
-from fastapi.staticfiles import StaticFiles
+from fastapi_vue import Frontend

 from paskia.fastapi import admin, api, auth_host, ws
 from paskia.fastapi.session import AUTH_COOKIE
-from paskia.util import frontend, hostutil, passphrase
+from paskia.util import hostutil, passphrase, vitedev
+
+# Vue Frontend static files
+frontend = Frontend(
+    Path(__file__).parent.parent / "frontend-build",
+    cached=["/auth/assets/"],
+)
+

 # Path to examples/index.html when running from source tree
 _EXAMPLES_DIR = Path(__file__).parent.parent.parent / "examples"
@@ -43,14 +50,15 @@ async def lifespan(app: FastAPI):  # pragma: no cover - startup path
        raise

    # Restore info level logging after startup (suppressed during uvicorn init in dev mode)
-    if frontend.is_dev_mode():
+    if frontend.devmode:
        logging.getLogger("uvicorn").setLevel(logging.INFO)
        logging.getLogger("uvicorn.access").setLevel(logging.INFO)

+    await frontend.load()
    yield


-app = FastAPI(lifespan=lifespan)
+app = FastAPI(lifespan=lifespan, redirect_slashes=False)

 # Apply redirections to auth-host if configured (deny access to restricted endpoints, remove /auth/)
 app.middleware("http")(auth_host.redirect_middleware)
@@ -59,19 +67,11 @@ 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"))
+    return Response(*await vitedev.read("/auth/restricted/index.html"))


 # Navigable URLs are defined here. We support both / and /auth/ as the base path
@@ -86,7 +86,7 @@ async def frontapp(request: Request, response: Response, auth=AUTH_COOKIE):
    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"))
+    return Response(*await vitedev.read("/auth/index.html"))


@app.get("/admin", include_in_schema=False)
@@ -96,6 +96,7 @@ async def admin_root_redirect():


@app.get("/admin/", include_in_schema=False)
+@app.get("/auth/admin/", include_in_schema=False)
 async def admin_root(request: Request, auth=AUTH_COOKIE):
    return await admin.adminapp(request, auth)  # Delegated to admin app

@@ -127,4 +128,8 @@ async def token_link(token: str):
    if not passphrase.is_well_formed(token):
        raise HTTPException(status_code=404)

-    return Response(*await frontend.read("/int/reset/index.html"))
+    return Response(*await vitedev.read("/int/reset/index.html"))
+
+
+# Final catch-all route for frontend files (keep at end of file)
+frontend.route(app, "/")
@@ -15,11 +15,10 @@ from uuid import UUID
 import base64url
 from fastapi import FastAPI, WebSocket, WebSocketDisconnect

-from paskia import remoteauth
-from paskia.authsession import create_session
+from paskia import db, remoteauth
 from paskia.fastapi.session import infodict
 from paskia.fastapi.wsutil import validate_origin, websocket_error_handler
-from paskia.globals import db, passkey
+from paskia.globals import passkey
 from paskia.util import passphrase, pow

 # Create a FastAPI subapp for remote auth WebSocket endpoints
@@ -38,7 +37,7 @@ async def websocket_remote_auth_request(ws: WebSocket):
    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/pair
+    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
@@ -250,9 +249,9 @@ async def websocket_remote_auth_request(ws: WebSocket):
        remoteauth.instance.decrement_connections()


-@app.websocket("/pair")
+@app.websocket("/permit")
@websocket_error_handler
-async def websocket_remote_auth_pair(ws: WebSocket):
+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.
@@ -323,9 +322,7 @@ async def websocket_remote_auth_pair(ws: WebSocket):

                # Fetch and verify credential
                try:
-                    stored_cred = await db.instance.get_credential_by_id(
-                        credential.raw_id
-                    )
+                    stored_cred = db.get_credential_by_id(credential.raw_id)
                except ValueError:
                    raise ValueError(
                        f"This passkey is no longer registered with {passkey.instance.rp_name}"
@@ -336,9 +333,6 @@ async def websocket_remote_auth_pair(ws: WebSocket):
                    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

@@ -348,34 +342,40 @@ async def websocket_remote_auth_pair(ws: WebSocket):
                if request.action == "register":
                    # For registration, create a reset token for device addition
                    from paskia.authsession import expires
-                    from paskia.util import tokens
+                    from paskia.util import hostutil

                    token_str = passphrase.generate()
                    expiry = expires()
-                    await db.instance.create_reset_token(
+                    db.create_reset_token(
                        user_uuid=stored_cred.user_uuid,
-                        key=tokens.reset_key(token_str),
+                        passphrase=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(
+                    # Also create a session so the device is logged in
+                    normalized_host = hostutil.normalize_host(request.host)
+                    session_token = db.login(
                        user_uuid=stored_cred.user_uuid,
-                        credential_uuid=stored_cred.uuid,
-                        host=request.host,
+                        credential=stored_cred,
+                        host=normalized_host,
                        ip=request.ip,
                        user_agent=request.user_agent,
+                        expiry=expires(),
                    )
                else:
                    # Default login action
-                    session_token = await create_session(
+                    from paskia.authsession import expires
+                    from paskia.util import hostutil
+
+                    normalized_host = hostutil.normalize_host(request.host)
+                    session_token = db.login(
                        user_uuid=stored_cred.user_uuid,
-                        credential_uuid=stored_cred.uuid,
-                        host=request.host,
+                        credential=stored_cred,
+                        host=normalized_host,
                        ip=request.ip,
                        user_agent=request.user_agent,
+                        expiry=expires(),
                    )

                # Complete the remote auth request (notifies the waiting device)
@@ -16,9 +16,8 @@ import asyncio
 from uuid import UUID

 from paskia import authsession as _authsession
-from paskia import globals as _g
+from paskia import db as _db
 from paskia.util import hostutil, passphrase
-from paskia.util import tokens as _tokens


 async def _resolve_targets(query: str | None):
@@ -27,9 +26,9 @@ async def _resolve_targets(query: str | None):
        targets: list[tuple] = []
        try:
            q_uuid = UUID(query)
-            perm_orgs = await _g.db.instance.get_permission_organizations("auth:admin")
+            perm_orgs = _db.get_permission_organizations("auth:admin")
            for o in perm_orgs:
-                users = await _g.db.instance.get_organization_users(str(o.uuid))
+                users = _db.get_organization_users(str(o.uuid))
                for u, role_name in users:
                    if u.uuid == q_uuid:
                        return [(u, role_name)]
@@ -38,9 +37,9 @@ async def _resolve_targets(query: str | None):
            pass
        # Substring search
        needle = query.lower()
-        perm_orgs = await _g.db.instance.get_permission_organizations("auth:admin")
+        perm_orgs = _db.get_permission_organizations("auth:admin")
        for o in perm_orgs:
-            users = await _g.db.instance.get_organization_users(str(o.uuid))
+            users = _db.get_organization_users(str(o.uuid))
            for u, role_name in users:
                if needle in (u.display_name or "").lower():
                    targets.append((u, role_name))
@@ -53,10 +52,10 @@ async def _resolve_targets(query: str | None):
                deduped.append((u, role_name))
        return deduped
    # No query -> master admin
-    perm_orgs = await _g.db.instance.get_permission_organizations("auth:admin")
+    perm_orgs = _db.get_permission_organizations("auth:admin")
    if not perm_orgs:
        return []
-    users = await _g.db.instance.get_organization_users(str(perm_orgs[0].uuid))
+    users = _db.get_organization_users(str(perm_orgs[0].uuid))
    admin_users = [pair for pair in users if pair[1] == "Administration"]
    return admin_users[:1]

@@ -64,9 +63,9 @@ async def _resolve_targets(query: str | None):
 async def _create_reset(user, role_name: str):
    token = passphrase.generate()
    expiry = _authsession.reset_expires()
-    await _g.db.instance.create_reset_token(
+    _db.create_reset_token(
+        passphrase=token,
        user_uuid=user.uuid,
-        key=_tokens.reset_key(token),
        expiry=expiry,
        token_type="manual reset",
    )
@@ -10,6 +10,7 @@ from fastapi import (
 )
 from fastapi.responses import JSONResponse

+from paskia import db
 from paskia.authsession import (
    delete_credential,
    expires,
@@ -17,9 +18,7 @@ from paskia.authsession import (
 )
 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
+from paskia.util import hostutil, passphrase

 app = FastAPI()

@@ -33,7 +32,7 @@ async def auth_exception_handler(_request, exc: authz.AuthException):
    )


-@app.put("/display-name")
+@app.patch("/display-name")
 async def user_update_display_name(
    request: Request,
    response: Response,
@@ -55,7 +54,7 @@ async def user_update_display_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)
+    db.update_user_display_name(s.user_uuid, new_name)
    return {"status": "ok"}


@@ -69,7 +68,7 @@ async def api_logout_all(request: Request, response: Response, auth=AUTH_COOKIE)
        raise authz.AuthException(
            status_code=401, detail="Session expired", mode="login"
        )
-    await db.instance.delete_sessions_for_user(s.user_uuid)
+    db.delete_sessions_for_user(s.user_uuid)
    session.clear_session_cookie(response)
    return {"message": "Logged out from all hosts"}

@@ -92,19 +91,12 @@ async def api_delete_session(
            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)
+    target_session = db.get_session(session_id)
    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)
+    db.delete_session(session_id)
+    current_terminated = session_id == auth
    if current_terminated:
        session.clear_session_cookie(response)  # explicit because 200
    return {"status": "ok", "current_session_terminated": current_terminated}
@@ -144,9 +136,9 @@ async def api_create_link(
        ) from e
    token = passphrase.generate()
    expiry = expires()
-    await db.instance.create_reset_token(
+    db.create_reset_token(
        user_uuid=s.user_uuid,
-        key=tokens.reset_key(token),
+        passphrase=token,
        expiry=expiry,
        token_type="device addition",
    )
@@ -2,17 +2,20 @@ from uuid import UUID

 from fastapi import FastAPI, WebSocket

-from paskia.authsession import create_session, get_reset, get_session
-from paskia.fastapi import authz
+from paskia import db
+from paskia.authsession import expires, 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
+from paskia.globals import passkey
+from paskia.util import hostutil, passphrase

 # 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,
@@ -62,25 +65,23 @@ async def websocket_register_add(
        s = ctx.session

    # Get user information and determine effective user_name for this registration
-    user = await db.instance.get_user_by_uuid(user_uuid)
+    user = db.get_user_by_uuid(user_uuid)
    user_name = user.display_name
    if name is not None:
        stripped = name.strip()
        if stripped:
            user_name = stripped
-    challenge_ids = await db.instance.get_credentials_by_user_uuid(user_uuid)
+    challenge_ids = db.get_credentials_by_user_uuid(user_uuid)

    # WebAuthn registration
    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]
+    token = db.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),
        display_name=user_name,
        host=host,
        ip=metadata.get("ip"),
@@ -112,9 +113,7 @@ async def websocket_authenticate(ws: WebSocket, auth=AUTH_COOKIE):
        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
-            )
+            credential_ids = db.get_credentials_by_user_uuid(session_user_uuid)
        except ValueError:
            pass  # Invalid/expired session - allow normal authentication

@@ -126,7 +125,7 @@ async def websocket_authenticate(ws: WebSocket, auth=AUTH_COOKIE):
    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)
+        stored_cred = db.get_credential_by_id(credential.raw_id)
    except ValueError:
        raise ValueError(
            f"This passkey is no longer registered with {passkey.instance.rp_name}"
@@ -138,18 +137,25 @@ async def websocket_authenticate(ws: WebSocket, auth=AUTH_COOKIE):

    # Verify the credential matches the stored data
    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
+    # Create session and update user/credential in a single transaction
    assert stored_cred.uuid is not None
    metadata = infodict(ws, "auth")
-    token = await create_session(
+    normalized_host = hostutil.normalize_host(host)
+    if not normalized_host:
+        raise ValueError("Host required for session creation")
+    hostname = normalized_host.split(":")[0]
+    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 = db.login(
        user_uuid=stored_cred.user_uuid,
-        credential_uuid=stored_cred.uuid,
-        host=host,
+        credential=stored_cred,
+        host=normalized_host,
        ip=metadata.get("ip") or "",
        user_agent=metadata.get("user_agent") or "",
+        expiry=expires(),
    )

    await ws.send_json(
@@ -1,6 +1,5 @@
 from typing import Generic, TypeVar

-from paskia.db import DatabaseInterface
 from paskia.sansio import Passkey

 T = TypeVar("T")
@@ -38,7 +37,13 @@ async def init(
    If bootstrap=True (default) the system bootstrap_if_needed() will be invoked.
    In FastAPI lifespan we call with bootstrap=False to avoid duplicate bootstrapping
    since the CLI performs it once before servers start.
+
+    Database configuration:
+        Set PASKIA_DB environment variable to specify the JSONL database file path.
+        Default: paskia.jsonl
    """
+    from . import db, remoteauth
+
    # Initialize passkey instance with provided parameters
    passkey.instance = Passkey(
        rp_id=rp_id,
@@ -46,13 +51,11 @@ async def init(
        origins=origins,
    )

-    # Test if we have a database already initialized, otherwise use SQL
-    try:
-        db.instance
-    except RuntimeError:
-        from .db import sql
+    # Initialize database
+    await db.init()

-        await sql.init()
+    # Initialize remote auth manager
+    await remoteauth.init()

    if bootstrap:
        # Bootstrap system if needed
@@ -63,4 +66,3 @@ async def init(

 # Global instances
 passkey = Manager[Passkey]("Passkey")
-db = Manager[DatabaseInterface]("Database")
@@ -0,0 +1,274 @@
+"""
+SQL to JSON migration module for Paskia.
+
+This module contains the legacy SQL database implementation and migration tools
+for converting from the old SQLite database to the new JSONL format.
+
+Usage:
+    python -m paskia.migrate --sql sqlite+aiosqlite:///paskia.sqlite --json paskia.jsonl
+
+Or via the CLI entry point (if installed):
+    paskia-migrate --sql sqlite+aiosqlite:///paskia.sqlite --json paskia.jsonl
+"""
+
+import asyncio
+from datetime import datetime, timezone
+from uuid import UUID
+
+import base64url
+
+from paskia.authsession import EXPIRES
+
+from .sql import (
+    DB as SQLDB,
+)
+from .sql import (
+    CredentialModel,
+    ResetTokenModel,
+    SessionModel,
+    UserModel,
+)
+
+# Re-export for convenience
+__all__ = ["migrate_from_sql", "main", "SQLDB"]
+
+# Default paths
+SQL_DB_DEFAULT = "sqlite+aiosqlite:///paskia.sqlite"
+JSON_DB_DEFAULT = "paskia.jsonl"
+
+
+async def migrate_from_sql(
+    sql_db_path: str = SQL_DB_DEFAULT,
+    json_db_path: str = JSON_DB_DEFAULT,
+) -> None:
+    """Migrate data from SQL database to JSON format.
+
+    Args:
+        sql_db_path: SQLAlchemy connection string for the source SQL database
+        json_db_path: Path for the destination JSONL file
+    """
+    # Import here to avoid circular imports and to not require JSON db at import time
+    import re
+
+    import uuid7
+    from sqlalchemy import select
+
+    from paskia.db.operations import DB as JSONDB
+    from paskia.db.structs import (
+        _CredentialData,
+        _OrgData,
+        _PermissionData,
+        _ResetTokenData,
+        _RoleData,
+        _SessionData,
+        _UserData,
+    )
+
+    # Initialize source SQL database
+    sql_db = SQLDB(sql_db_path)
+    await sql_db.init_db()
+
+    # Initialize destination JSON database (fresh, don't load existing)
+    json_db = JSONDB(json_db_path)
+    # Don't call json_db.load() - we want a fresh database, not to load existing
+
+    print(f"Migrating from {sql_db_path} to {json_db_path}...")
+
+    # Build all data directly without saving (we'll save once at the end)
+    # Track old permission ID -> new scope mapping for migration
+    # Also track org-specific admin permissions to consolidate
+    old_org_admin_pattern = re.compile(r"^auth:org:([0-9a-f-]+)$", re.IGNORECASE)
+    org_admin_uuids = set()  # org UUIDs that had org-specific admin permissions
+
+    # First pass: identify org-specific admin permissions
+    permissions = await sql_db.list_permissions()
+    for perm in permissions:
+        match = old_org_admin_pattern.match(perm.id)
+        if match:
+            org_admin_uuids.add(match.group(1).lower())
+
+    # Migrate permissions with UUID keys and scope field
+    # Always create exactly one common auth:org:admin permission for all org admin needs
+    org_admin_perm_uuid: UUID = uuid7.create()
+    json_db._data.permissions[org_admin_perm_uuid] = _PermissionData(
+        scope="auth:org:admin",
+        display_name="Org Admin",
+        orgs={},
+    )
+
+    # Mapping from old permission ID to new permission UUID
+    perm_id_to_uuid: dict[str, UUID] = {}
+
+    for perm in permissions:
+        # Skip old org-specific admin permissions (auth:org:{uuid}) - they map to auth:org:admin
+        match = old_org_admin_pattern.match(perm.id)
+        if match:
+            perm_id_to_uuid[perm.id] = org_admin_perm_uuid
+            continue
+
+        # Skip if this is already auth:org:admin - we created one above
+        if perm.id == "auth:org:admin":
+            perm_id_to_uuid[perm.id] = org_admin_perm_uuid
+            continue
+
+        # Regular permission - create with UUID key
+        perm_uuid: UUID = uuid7.create()
+        json_db._data.permissions[perm_uuid] = _PermissionData(
+            scope=perm.id,  # Old ID becomes the scope
+            display_name=perm.display_name,
+            orgs={},
+        )
+        perm_id_to_uuid[perm.id] = perm_uuid
+    print(
+        f"  Migrated {len(permissions)} permissions (with {len(org_admin_uuids)} org-specific admins consolidated to auth:org:admin)"
+    )
+
+    # Migrate organizations
+    orgs = await sql_db.list_organizations()
+    for org in orgs:
+        org_key: UUID = org.uuid
+        json_db._data.orgs[org_key] = _OrgData(
+            display_name=org.display_name,
+        )
+        # Update permissions to allow this org to grant them (by UUID)
+        for old_perm_id in org.permissions:
+            perm_uuid = perm_id_to_uuid.get(old_perm_id)
+            if perm_uuid and perm_uuid in json_db._data.permissions:
+                json_db._data.permissions[perm_uuid].orgs[org_key] = True
+        # Ensure every org can grant auth:org:admin
+        json_db._data.permissions[org_admin_perm_uuid].orgs[org_key] = True
+    print(f"  Migrated {len(orgs)} organizations")
+
+    # Migrate roles - convert old permission IDs to UUIDs
+    role_count = 0
+    for org in orgs:
+        for role in org.roles:
+            role_key: UUID = role.uuid
+            # Convert old permission IDs to UUIDs
+            new_permissions: dict[UUID, bool] = {}
+            for old_perm_id in role.permissions or []:
+                perm_uuid = perm_id_to_uuid.get(old_perm_id)
+                if perm_uuid:
+                    new_permissions[perm_uuid] = True
+            json_db._data.roles[role_key] = _RoleData(
+                org=role.org_uuid,
+                display_name=role.display_name,
+                permissions=new_permissions,
+            )
+            role_count += 1
+    print(f"  Migrated {role_count} roles")
+
+    # Migrate users
+    async with sql_db.session() as session:
+        result = await session.execute(select(UserModel))
+        user_models = result.scalars().all()
+        for um in user_models:
+            user = um.as_dataclass()
+            user_key: UUID = user.uuid
+            json_db._data.users[user_key] = _UserData(
+                display_name=user.display_name,
+                role=user.role_uuid,
+                created_at=user.created_at or datetime.now(timezone.utc),
+                last_seen=user.last_seen,
+                visits=user.visits,
+            )
+        print(f"  Migrated {len(user_models)} users")
+
+    # Migrate credentials
+    async with sql_db.session() as session:
+        result = await session.execute(select(CredentialModel))
+        cred_models = result.scalars().all()
+        for cm in cred_models:
+            cred = cm.as_dataclass()
+            cred_key: UUID = cred.uuid
+            json_db._data.credentials[cred_key] = _CredentialData(
+                credential_id=cred.credential_id,
+                user=cred.user_uuid,
+                aaguid=cred.aaguid,
+                public_key=cred.public_key,
+                sign_count=cred.sign_count,
+                created_at=cred.created_at,
+                last_used=cred.last_used,
+                last_verified=cred.last_verified,
+            )
+        print(f"  Migrated {len(cred_models)} credentials")
+
+    # Migrate sessions
+    # Old format: b"sess" + 12 bytes -> New format: base64url string (16 chars)
+    async with sql_db.session() as session:
+        result = await session.execute(select(SessionModel))
+        session_models = result.scalars().all()
+        for sm in session_models:
+            sess = sm.as_dataclass()
+            old_key: bytes = sess.key
+            # Strip b"sess" prefix and encode remaining 12 bytes as base64url
+            if old_key.startswith(b"sess"):
+                session_key = base64url.enc(old_key[4:])
+            else:
+                # Already in new format or unknown - try to use as-is
+                session_key = base64url.enc(old_key[:12])
+            json_db._data.sessions[session_key] = _SessionData(
+                user=sess.user_uuid,
+                credential=sess.credential_uuid,
+                host=sess.host,
+                ip=sess.ip,
+                user_agent=sess.user_agent,
+                expiry=sess.renewed + EXPIRES,  # Convert renewed to expiry
+            )
+        print(f"  Migrated {len(session_models)} sessions")
+
+    # Migrate reset tokens
+    # Old format: b"rset" + 16 bytes hash -> New format: 9 bytes (truncated hash)
+    async with sql_db.session() as session:
+        result = await session.execute(select(ResetTokenModel))
+        token_models = result.scalars().all()
+        for tm in token_models:
+            token = tm.as_dataclass()
+            old_key: bytes = token.key
+            # Strip b"rset" prefix and take first 9 bytes of hash
+            if old_key.startswith(b"rset"):
+                token_key = old_key[4:13]  # 9 bytes after prefix
+            else:
+                # Already in new format or unknown - truncate to 9 bytes
+                token_key = old_key[:9]
+            json_db._data.reset_tokens[token_key] = _ResetTokenData(
+                user=token.user_uuid,
+                expiry=token.expiry,
+                token_type=token.token_type,
+            )
+        print(f"  Migrated {len(token_models)} reset tokens")
+
+    # Queue and flush all changes with actor "migrate"
+    json_db._current_actor = "migrate"
+    json_db._queue_change()
+    from paskia.db.jsonl import flush_changes
+
+    await flush_changes(json_db.db_path, json_db._pending_changes)
+
+    print("Migration complete!")
+
+
+def main():
+    """CLI entry point for migration."""
+    import argparse
+
+    parser = argparse.ArgumentParser(
+        description="Migrate Paskia database from SQL to JSON"
+    )
+    parser.add_argument(
+        "--sql",
+        default=SQL_DB_DEFAULT,
+        help=f"Source SQL database connection string (default: {SQL_DB_DEFAULT})",
+    )
+    parser.add_argument(
+        "--json",
+        default=JSON_DB_DEFAULT,
+        help=f"Destination JSONL file path (default: {JSON_DB_DEFAULT})",
+    )
+    args = parser.parse_args()
+
+    asyncio.run(migrate_from_sql(args.sql, args.json))
+
+
+if __name__ == "__main__":
+    main()
@@ -0,0 +1,381 @@
+"""
+Legacy SQL database implementation for migration purposes.
+
+This module provides the async SQLAlchemy database layer that was used
+before the JSONL format. It is kept here for migration purposes only.
+
+DO NOT use this module for new code. Use paskia.db instead.
+"""
+
+from contextlib import asynccontextmanager
+from dataclasses import dataclass
+from datetime import datetime, timezone
+from uuid import UUID
+
+from sqlalchemy import (
+    DateTime,
+    ForeignKey,
+    Integer,
+    LargeBinary,
+    String,
+    event,
+    select,
+)
+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 paskia.db import (
+    Credential,
+    Org,
+    ResetToken,
+    Role,
+    User,
+)
+
+
+# Local Permission class for SQL schema (uses 'id' not 'uuid' + 'scope')
+@dataclass
+class SqlPermission:
+    """Permission as stored in the old SQL schema with id field."""
+
+    id: str
+    display_name: str
+
+
+DB_PATH_DEFAULT = "sqlite+aiosqlite:///paskia.sqlite"
+
+
+# Local Session class for SQL schema (uses 'renewed' not 'expiry')
+@dataclass
+class _SqlSession:
+    """Session as stored in the old SQL schema with renewed timestamp."""
+
+    key: bytes
+    user_uuid: UUID
+    credential_uuid: UUID
+    host: str
+    ip: str
+    user_agent: str
+    renewed: datetime
+
+
+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)
+
+
+class Base(DeclarativeBase):
+    pass
+
+
+class OrgModel(Base):
+    __tablename__ = "orgs"
+
+    uuid: Mapped[bytes] = mapped_column(LargeBinary(16), primary_key=True)
+    display_name: Mapped[str] = mapped_column(String, nullable=False)
+
+    def as_dataclass(self):
+        # Base Org without permissions/roles (filled by data accessors)
+        return Org(UUID(bytes=self.uuid), self.display_name)
+
+    @staticmethod
+    def from_dataclass(org: Org):
+        return OrgModel(uuid=org.uuid.bytes, display_name=org.display_name)
+
+
+class RoleModel(Base):
+    __tablename__ = "roles"
+
+    uuid: Mapped[bytes] = mapped_column(LargeBinary(16), primary_key=True)
+    org_uuid: Mapped[bytes] = mapped_column(
+        LargeBinary(16), ForeignKey("orgs.uuid", ondelete="CASCADE"), nullable=False
+    )
+    display_name: Mapped[str] = mapped_column(String, nullable=False)
+
+    def as_dataclass(self):
+        # Base Role without permissions (filled by data accessors)
+        return Role(
+            uuid=UUID(bytes=self.uuid),
+            org_uuid=UUID(bytes=self.org_uuid),
+            display_name=self.display_name,
+        )
+
+    @staticmethod
+    def from_dataclass(role: Role):
+        return RoleModel(
+            uuid=role.uuid.bytes,
+            org_uuid=role.org_uuid.bytes,
+            display_name=role.display_name,
+        )
+
+
+class UserModel(Base):
+    __tablename__ = "users"
+
+    uuid: Mapped[bytes] = mapped_column(LargeBinary(16), primary_key=True)
+    display_name: Mapped[str] = mapped_column(String, nullable=False)
+    role_uuid: Mapped[bytes] = mapped_column(
+        LargeBinary(16), ForeignKey("roles.uuid", ondelete="CASCADE"), nullable=False
+    )
+    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:
+        return User(
+            uuid=UUID(bytes=self.uuid),
+            display_name=self.display_name,
+            role_uuid=UUID(bytes=self.role_uuid),
+            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,
+        )
+
+    @staticmethod
+    def from_dataclass(user: User):
+        return UserModel(
+            uuid=user.uuid.bytes,
+            display_name=user.display_name,
+            role_uuid=user.role_uuid.bytes,
+            created_at=user.created_at or datetime.now(timezone.utc),
+            last_seen=user.last_seen,
+            visits=user.visits,
+        )
+
+
+class CredentialModel(Base):
+    __tablename__ = "credentials"
+
+    uuid: Mapped[bytes] = mapped_column(LargeBinary(16), primary_key=True)
+    credential_id: Mapped[bytes] = mapped_column(
+        LargeBinary(64), unique=True, index=True
+    )
+    user_uuid: Mapped[bytes] = mapped_column(
+        LargeBinary(16), ForeignKey("users.uuid", ondelete="CASCADE")
+    )
+    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(timezone=True), default=lambda: datetime.now(timezone.utc)
+    )
+    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):
+        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):
+    __tablename__ = "sessions"
+
+    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
+    )
+    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,
+    )
+
+    def as_dataclass(self):
+        return _SqlSession(
+            key=self.key,
+            user_uuid=UUID(bytes=self.user_uuid),
+            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
+    def from_dataclass(session: _SqlSession):
+        return SessionModel(
+            key=session.key,
+            user_uuid=session.user_uuid.bytes,
+            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,
+        )
+
+
+class PermissionModel(Base):
+    __tablename__ = "permissions"
+
+    id: Mapped[str] = mapped_column(String(64), primary_key=True)
+    display_name: Mapped[str] = mapped_column(String, nullable=False)
+
+    def as_dataclass(self):
+        return SqlPermission(self.id, self.display_name)
+
+    @staticmethod
+    def from_dataclass(permission: SqlPermission):
+        return PermissionModel(
+            id=permission.id,
+            display_name=permission.display_name,
+        )
+
+
+class OrgPermission(Base):
+    """Permissions each organization is allowed to grant to its roles."""
+
+    __tablename__ = "org_permissions"
+
+    id: Mapped[int] = mapped_column(Integer, primary_key=True)
+    org_uuid: Mapped[bytes] = mapped_column(
+        LargeBinary(16), ForeignKey("orgs.uuid", ondelete="CASCADE")
+    )
+    permission_id: Mapped[str] = mapped_column(
+        String(64), ForeignKey("permissions.id", ondelete="CASCADE")
+    )
+
+
+class RolePermission(Base):
+    """Permissions that each role grants to its members."""
+
+    __tablename__ = "role_permissions"
+
+    id: Mapped[int] = mapped_column(Integer, primary_key=True)
+    role_uuid: Mapped[bytes] = mapped_column(
+        LargeBinary(16), ForeignKey("roles.uuid", ondelete="CASCADE")
+    )
+    permission_id: Mapped[str] = mapped_column(
+        String(64), ForeignKey("permissions.id", ondelete="CASCADE")
+    )
+
+
+class DB:
+    """Legacy SQL database class for migration purposes only."""
+
+    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
+        if db_path.startswith("sqlite"):
+
+            @event.listens_for(self.engine.sync_engine, "connect")
+            def _fk_on(dbapi_connection, connection_record):
+                try:
+                    cursor = dbapi_connection.cursor()
+                    cursor.execute("PRAGMA foreign_keys=ON;")
+                    cursor.close()
+                except Exception:
+                    pass
+
+        self.async_session_factory = async_sessionmaker(
+            self.engine, expire_on_commit=False
+        )
+
+    @asynccontextmanager
+    async def session(self):
+        """Async context manager that provides a database session with transaction."""
+        async with self.async_session_factory() as session:
+            async with session.begin():
+                yield session
+                await session.flush()
+            await session.commit()
+
+    async def init_db(self) -> None:
+        """Initialize database tables."""
+        async with self.engine.begin() as conn:
+            await conn.run_sync(Base.metadata.create_all)
+
+    async def list_permissions(self) -> list[SqlPermission]:
+        async with self.session() as session:
+            result = await session.execute(select(PermissionModel))
+            return [p.as_dataclass() for p in result.scalars().all()]
+
+    async def list_organizations(self) -> list[Org]:
+        async with self.session() as session:
+            # Load all orgs
+            orgs_result = await session.execute(select(OrgModel))
+            org_models = orgs_result.scalars().all()
+            if not org_models:
+                return []
+
+            # Preload org permissions mapping
+            org_perms_result = await session.execute(select(OrgPermission))
+            org_perms = org_perms_result.scalars().all()
+            perms_by_org: dict[bytes, list[str]] = {}
+            for op in org_perms:
+                perms_by_org.setdefault(op.org_uuid, []).append(op.permission_id)
+
+            # Preload roles
+            roles_result = await session.execute(select(RoleModel))
+            role_models = roles_result.scalars().all()
+
+            # Preload role permissions mapping
+            rp_result = await session.execute(select(RolePermission))
+            rps = rp_result.scalars().all()
+            perms_by_role: dict[bytes, list[str]] = {}
+            for rp in rps:
+                perms_by_role.setdefault(rp.role_uuid, []).append(rp.permission_id)
+
+            # Build org dataclasses with roles and permission IDs
+            roles_by_org: dict[bytes, list[Role]] = {}
+            for rm in role_models:
+                r_dc = rm.as_dataclass()
+                r_dc.permissions = perms_by_role.get(rm.uuid, [])
+                roles_by_org.setdefault(rm.org_uuid, []).append(r_dc)
+
+            orgs: list[Org] = []
+            for om in org_models:
+                o_dc = om.as_dataclass()
+                o_dc.permissions = perms_by_org.get(om.uuid, [])
+                o_dc.roles = roles_by_org.get(om.uuid, [])
+                orgs.append(o_dc)
+
+            return orgs
@@ -11,7 +11,7 @@ __all__ = ["path", "file", "read", "is_dev_mode"]

 def _get_dev_server() -> str | None:
    """Get the dev server URL from environment, or None if not in dev mode."""
-    return os.environ.get("PASKIA_DEVMODE") or None
+    return os.environ.get("FASTAPI_VUE_FRONTEND_URL") or None


 def _resolve_static_dir() -> Path:
@@ -3,9 +3,8 @@
 from collections.abc import Sequence
 from fnmatch import fnmatchcase

-from paskia.globals import db
+from paskia import db
 from paskia.util.hostutil import normalize_host
-from paskia.util.tokens import session_key

 __all__ = ["has_any", "has_all", "session_context"]

@@ -17,16 +16,28 @@ def _match(perms: set[str], patterns: Sequence[str]):
    )


+def _get_effective_scopes(ctx) -> set[str]:
+    """Get effective permission scopes from context.
+
+    Returns scopes from ctx.permissions (filtered by org) if available,
+    otherwise falls back to ctx.role.permissions for backwards compatibility.
+    """
+    if ctx.permissions:
+        return {p.scope for p in ctx.permissions}
+    # Fallback for contexts without effective permissions computed
+    return set(ctx.role.permissions or [])
+
+
 def has_any(ctx, patterns: Sequence[str]) -> bool:
-    return any(_match(ctx.role.permissions, patterns)) if ctx else False
+    return any(_match(_get_effective_scopes(ctx), patterns)) if ctx else False


 def has_all(ctx, patterns: Sequence[str]) -> bool:
-    return all(_match(ctx.role.permissions, patterns)) if ctx else False
+    return all(_match(_get_effective_scopes(ctx), patterns)) if ctx else False


 async def session_context(auth: str | None, host: str | None = None):
    if not auth:
        return None
    normalized_host = normalize_host(host) if host else None
-    return await db.instance.get_session_context(session_key(auth), normalized_host)
+    return db.get_session_context(auth, normalized_host)
@@ -2,6 +2,7 @@

 from datetime import datetime, timezone

+from paskia.authsession import EXPIRES
 from paskia.db import SessionContext
 from paskia.util.timeutil import parse_duration

@@ -27,11 +28,11 @@ def check_session_age(ctx: SessionContext, max_age: str | None) -> bool:

    max_age_delta = parse_duration(max_age)

-    # Use credential's last_used time if available, fall back to session renewed
+    # Use credential's last_used time if available, fall back to session renewed time
    if ctx.credential and ctx.credential.last_used:
        auth_time = ctx.credential.last_used
    else:
-        auth_time = ctx.session.renewed
+        auth_time = ctx.session.expiry - EXPIRES

    time_since_auth = datetime.now(timezone.utc) - auth_time
    return time_since_auth <= max_age_delta
@@ -41,7 +41,7 @@ def print_startup_config(config: "PaskiaConfig") -> None:
        lines.append(line(f"Auth Host:      {config.auth_host}"))

    # Show frontend URL if in dev mode
-    devmode = os.environ.get("PASKIA_DEVMODE")
+    devmode = os.environ.get("FASTAPI_VUE_FRONTEND_URL")
    if devmode:
        lines.append(line(f"Dev Frontend:   {devmode}"))

@@ -1,44 +0,0 @@
-import hashlib
-import secrets
-
-import base64url
-
-from paskia.util.passphrase import is_well_formed
-
-
-def create_token() -> str:
-    return secrets.token_urlsafe(12)  # 16 characters Base64
-
-
-def session_key(token: str) -> bytes:
-    if len(token) != 16:
-        raise ValueError("Session token must be exactly 16 characters long")
-    return b"sess" + base64url.dec(token)
-
-
-def encode_session_key(key: bytes) -> str:
-    """Encode an opaque session key for external representation."""
-    return base64url.enc(key)
-
-
-def decode_session_key(encoded: str) -> bytes:
-    """Decode an opaque session key from its public representation."""
-    if not encoded:
-        raise ValueError("Invalid session identifier")
-    try:
-        raw = base64url.dec(encoded)
-    except Exception as exc:  # pragma: no cover - defensive
-        raise ValueError("Invalid session identifier") from exc
-    if not raw.startswith(b"sess"):
-        raise ValueError("Invalid session identifier")
-    return raw
-
-
-def reset_key(passphrase: str) -> bytes:
-    if not is_well_formed(passphrase):
-        raise ValueError(
-            "Trying to reset with a session token in place of a passphrase"
-            if len(passphrase) == 16
-            else "Invalid passphrase format"
-        )
-    return b"rset" + hashlib.sha512(passphrase.encode()).digest()[:12]
@@ -2,10 +2,9 @@

 from datetime import timezone

-from paskia import aaguid
-from paskia.authsession import session_key
-from paskia.globals import db
-from paskia.util import hostutil, permutil, tokens, useragent
+from paskia import aaguid, db
+from paskia.authsession import EXPIRES
+from paskia.util import hostutil, permutil, useragent


 def _format_datetime(dt):
@@ -41,20 +40,15 @@ async def format_user_info(
        - Sessions list
        - Permissions
    """
-    u = await db.instance.get_user_by_uuid(user_uuid)
+    u = db.get_user_by_uuid(user_uuid)
    ctx = await permutil.session_context(auth, request_host)

    # Fetch and format credentials
-    credential_ids = await db.instance.get_credentials_by_user_uuid(user_uuid)
+    user_credentials = db.get_credentials_by_user_uuid(user_uuid)
    credentials: list[dict] = []
    user_aaguids: set[str] = set()

-    for cred_id in credential_ids:
-        try:
-            c = await db.instance.get_credential_by_id(cred_id)
-        except ValueError:
-            continue
-
+    for c in user_credentials:
        aaguid_str = str(c.aaguid)
        user_aaguids.add(aaguid_str)
        credentials.append(
@@ -76,8 +70,6 @@ async def format_user_info(
    role_info = None
    org_info = None
    effective_permissions: list[str] = []
-    is_global_admin = False
-    is_org_admin = False

    if ctx:
        role_info = {
@@ -90,27 +82,23 @@ async def format_user_info(
            "display_name": ctx.org.display_name,
            "permissions": ctx.org.permissions,
        }
-        effective_permissions = [p.id for p in (ctx.permissions or [])]
-        is_global_admin = "auth:admin" in (role_info["permissions"] or [])
-        is_org_admin = any(
-            p.startswith("auth:org:") for p in (role_info["permissions"] or [])
-        )
+        effective_permissions = [p.scope for p in (ctx.permissions or [])]

    # Format sessions
    normalized_request_host = hostutil.normalize_host(request_host)
-    session_records = await db.instance.list_sessions_for_user(user_uuid)
-    current_session_key = session_key(auth)
+    session_records = db.list_sessions_for_user(user_uuid)
+    current_session_key = auth
    sessions_payload: list[dict] = []

    for entry in session_records:
        sessions_payload.append(
            {
-                "id": tokens.encode_session_key(entry.key),
+                "id": 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": _format_datetime(entry.renewed),
+                "last_renewed": _format_datetime(entry.expiry - EXPIRES),
                "is_current": entry.key == current_session_key,
                "is_current_host": bool(
                    normalized_request_host
@@ -132,8 +120,6 @@ async def format_user_info(
        "org": org_info,
        "role": role_info,
        "permissions": effective_permissions,
-        "is_global_admin": is_global_admin,
-        "is_org_admin": is_org_admin,
        "credentials": credentials,
        "aaguid_info": aaguid_info,
        "sessions": sessions_payload,
@@ -150,7 +136,7 @@ async def format_reset_user_info(user_uuid, reset_token) -> dict:
    Returns:
        Dictionary with minimal user info for password reset flow
    """
-    u = await db.instance.get_user_by_uuid(user_uuid)
+    u = db.get_user_by_uuid(user_uuid)

    return {
        "authenticated": False,
@@ -0,0 +1,71 @@
+"""Vite dev server proxy for fetching frontend files during development.
+
+In dev mode (FASTAPI_VUE_FRONTEND_URL set), fetches files from Vite.
+In production, reads from the static build directory.
+
+This complements fastapi_vue.Frontend which handles static file serving
+but doesn't provide server-side fetching of HTML content.
+"""
+
+import asyncio
+import mimetypes
+import os
+from pathlib import Path
+
+import httpx
+
+__all__ = ["read"]
+
+
+def _get_dev_server() -> str | None:
+    """Get the dev server URL from environment, or None if not in dev mode."""
+    return os.environ.get("FASTAPI_VUE_FRONTEND_URL") or None
+
+
+def _resolve_static_dir() -> Path:
+    """Resolve the static files directory."""
+    from importlib import resources
+
+    # Try packaged path via importlib.resources (works for wheel/installed).
+    try:  # pragma: no cover - trivial path resolution
+        pkg_dir = resources.files("paskia") / "frontend-build"
+        fs_path = Path(str(pkg_dir))
+        if fs_path.is_dir():
+            return fs_path
+    except Exception:  # pragma: no cover - defensive
+        pass
+    # Fallback for editable/development before build.
+    return Path(__file__).parent.parent / "frontend-build"
+
+
+_static_dir: Path = _resolve_static_dir()
+
+
+async def read(filepath: str) -> tuple[bytes, int, dict[str, str]]:
+    """Read file content and return response tuple.
+
+    In dev mode, fetches from the Vite dev server.
+    In production, reads from the static build directory.
+
+    Args:
+        filepath: Path relative to frontend root, e.g. "/auth/index.html"
+
+    Returns:
+        Tuple of (content, status_code, headers) suitable for
+        FastAPI Response(*args).
+    """
+    dev_server = _get_dev_server()
+    if dev_server:
+        async with httpx.AsyncClient() as client:
+            resp = await client.get(f"{dev_server}{filepath}")
+            resp.raise_for_status()
+            mime = resp.headers.get("content-type", "application/octet-stream")
+            # Strip charset suffix if present
+            mime = mime.split(";")[0].strip()
+            return resp.content, resp.status_code, {"content-type": mime}
+    else:
+        # Production: read from static build
+        file_path = _static_dir / filepath.lstrip("/")
+        content = await asyncio.to_thread(file_path.read_bytes)
+        mime, _ = mimetypes.guess_type(str(file_path))
+        return content, 200, {"content-type": mime or "application/octet-stream"}
@@ -6,6 +6,7 @@ build-backend = "hatchling.build"
 name = "paskia"
 dynamic = ["version"]
 description = "Passkey Auth made easy: all sites and APIs can be guarded even without any changes on the protected site."
+readme = "README.md"
 keywords = [ "forward_auth", "auth_request", "FastAPI" ]
 authors = [
    {name = "Leo Vasanko"},
@@ -15,13 +16,19 @@ dependencies = [
    "websockets>=12.0",
    "webauthn>=1.11.1",
    "base64url>=1.0.0",
-    "sqlalchemy[asyncio]>=2.0.0",
-    "aiosqlite>=0.19.0",
    "uuid7-standard>=1.0.0",
    "pyjwt>=2.8.0",
    "user-agents>=2.2.0",
+    "jsondiff>=2.2.1",
+    "msgspec>=0.20.0",
+    "aiofiles>=25.1.0",
+    "fastapi-vue>=0.3.0",
 ]
-requires-python = ">=3.10"
+requires-python = ">=3.11"
+
+[project.urls]
+Homepage = "https://git.zi.fi/LeoVasanko/paskia"
+Repository = "https://github.com/LeoVasanko/paskia"

 [tool.hatch.version]
 source = "vcs"
@@ -37,6 +44,10 @@ dev = [
    "pytest-asyncio>=0.24.0",
    "httpx>=0.27.0",
 ]
+migrate = [
+    "sqlalchemy[asyncio]>=2.0.0",
+    "aiosqlite>=0.19.0",
+]

 [tool.coverage.run]
 source = ["paskia"]
@@ -84,7 +95,10 @@ dev = [

 [project.scripts]
 paskia = "paskia.fastapi.__main__:main"
+paskia-migrate = "paskia.migrate:main"

 [tool.hatch.build]
 artifacts = ["paskia/frontend-build"]
 targets.sdist.hooks.custom.path = "scripts/build-frontend.py"
+packages = ["paskia"]
+only-packages = true
@@ -0,0 +1,277 @@
+#!/usr/bin/env -S uv run
+# auto-upgrade@fastapi-vue-setup - remove this if you modify this file
+"""Run Vite development server for frontend and FastAPI backend with auto-reload.
+
+Usage:
+    uv run scripts/devserver.py [host:port] [--backend host:port]
+
+The optional host:port argument sets where the Vite frontend listens.
+Supported forms: host[:port], :port (all interfaces), or just port.
+The --backend option sets where the FastAPI backend listens (default: localhost:5180).
+
+Environment:
+    JS_RUNTIME          Path or name of JS runtime to use (deno, npm/node or bun).
+    FASTAPI_VUE_FRONTEND_URL    Set by this script for the backend to know where Vite is.
+"""
+
+import argparse
+import asyncio
+import contextlib
+import os
+from pathlib import Path
+from sys import stderr
+
+import httpx
+from fastapi_vue.hostutil import parse_endpoint
+
+exec((Path(__file__).parent / "fastapi-vue/util.py").read_text("UTF-8"))  # noqa: S102
+
+DEFAULT_VITE_PORT = 5173
+DEFAULT_BACKEND_PORT = 5180
+FRONTEND_PATH = Path(__file__).parent.parent / "frontend"
+
+EPILOG = """
+  scripts/devserver.py                       # Default ports on localhost
+  scripts/devserver.py 3000                  # Vite on localhost:3000
+  scripts/devserver.py :3000 --backend 8000  # *:3000, localhost:8000
+"""
+
+BUN_BUG = """\
+┃ ⚠️  Bun cannot correctly proxy API requests to the backend.
+┃ Bug report: https://github.com/oven-sh/bun/issues/9882
+┃
+┃ Consider using deno or npm instead for development.
+"""
+
+
+def resolve_frontend_tools(
+    vite_port: int, all_ifaces: bool
+) -> tuple[list[str], list[str], str]:
+    """Resolve frontend install and dev commands.
+
+    Returns (install_cmd, dev_cmd, tool_name).
+    Raises SystemExit if tools are not available.
+    """
+    if not (FRONTEND_PATH / "package.json").exists():
+        stderr.write(f"┃ ⚠️  Frontend source not found at {FRONTEND_PATH}\n")
+        raise SystemExit(1)
+
+    result = find_js_runtime()  # noqa # type: ignore
+    if result is None:
+        if not os.environ.get("JS_RUNTIME"):
+            stderr.write("┃ ⚠️  deno, npm or bun needed to run the frontend server.\n")
+        raise SystemExit(1)
+
+    tool, name = result
+
+    install_args = {
+        "deno": ("install", "--quiet", "--allow-scripts=npm:vue-demi"),
+        "npm": ("install", "--silent"),
+        "bun": ("install", "--silent"),
+    }
+    dev_args = {
+        "deno": ("run", "dev", "--"),
+        "npm": ("--silent", "run", "dev", "--"),
+        "bun": ("run", "dev", "--"),
+    }
+
+    install_cmd = [tool, *install_args[name]]
+    dev_cmd = [
+        tool,
+        *dev_args[name],
+        "--clearScreen=false",
+        f"--port={vite_port}",
+    ]
+
+    if all_ifaces:
+        dev_cmd.append("--host")
+
+    if name == "bun":
+        stderr.write(BUN_BUG)
+
+    return install_cmd, dev_cmd, name
+
+
+async def wait_for_backend(host: str, port: int):
+    """Wait for the backend to be ready by polling the health endpoint."""
+    max_attempts = 50
+    url = f"http://{host}:{port}"
+
+    async with httpx.AsyncClient() as client:
+        for attempt in range(max_attempts):
+            try:
+                await client.get(url, timeout=1.0)
+                stderr.write("✓ Backend ready!\n")
+                return True
+            except httpx.RequestError:
+                if attempt == max_attempts - 1:
+                    stderr.write("┃ ⚠️  Backend didn't start in time\n")
+                    return False
+                await asyncio.sleep(0.1)
+    return False
+
+
+async def _terminate_process(proc: asyncio.subprocess.Process, name: str) -> None:
+    """Gracefully terminate a subprocess."""
+    if proc.returncode is not None:
+        return
+    try:
+        proc.terminate()
+    except ProcessLookupError:
+        return
+    try:
+        await asyncio.wait_for(proc.wait(), timeout=2)
+    except TimeoutError:
+        try:
+            proc.kill()
+        except ProcessLookupError:
+            return
+        await proc.wait()
+
+
+async def run_devserver(
+    vite_port: int,
+    all_ifaces: bool,
+    backend_host: str,
+    backend_port: int,
+) -> None:
+    """Run the development server with install, backend, and frontend."""
+    install_cmd, dev_cmd, tool_name = resolve_frontend_tools(vite_port, all_ifaces)
+
+    # Tell the backend where the Vite dev server is
+    os.environ["FASTAPI_VUE_FRONTEND_URL"] = f"http://localhost:{vite_port}"
+    # Tell Vite where the backend is (for proxying /api requests)
+    os.environ["FASTAPI_VUE_BACKEND_URL"] = f"http://{backend_host}:{backend_port}"
+
+    backend_cmd = [
+        "uvicorn",
+        "paskia.app:app",
+        "--host",
+        backend_host,
+        "--port",
+        str(backend_port),
+        "--reload",
+    ]
+
+    cwd = str(Path(__file__).parent.parent)
+    frontend_cwd = str(FRONTEND_PATH)
+
+    backend_proc: asyncio.subprocess.Process | None = None
+    install_proc: asyncio.subprocess.Process | None = None
+    frontend_proc: asyncio.subprocess.Process | None = None
+
+    try:
+        # Start install (concurrent with backend)
+        stderr.write(f">>> {tool_name} {' '.join(install_cmd[1:])}\n")
+        install_proc = await asyncio.create_subprocess_exec(
+            *install_cmd, cwd=frontend_cwd
+        )
+
+        await asyncio.sleep(0.1)
+
+        # Start backend (concurrent with install)
+        stderr.write(f">>> {' '.join(backend_cmd)}\n")
+        backend_proc = await asyncio.create_subprocess_exec(*backend_cmd, cwd=cwd)
+
+        # Wait for install to complete and backend to be ready
+        install_task = asyncio.create_task(install_proc.wait(), name="install")
+        backend_ready_task = asyncio.create_task(
+            wait_for_backend(backend_host, backend_port), name="backend_ready"
+        )
+
+        done, pending = await asyncio.wait(
+            {install_task, backend_ready_task},
+            return_when=asyncio.FIRST_COMPLETED,
+        )
+
+        for task in done:
+            if task.get_name() == "install":
+                if task.result() != 0:
+                    stderr.write("┃ ⚠️  Install failed\n")
+                    raise SystemExit(1)
+            elif task.get_name() == "backend_ready" and not task.result():
+                raise SystemExit(1)
+
+        if pending:
+            done2, _ = await asyncio.wait(pending)
+            for task in done2:
+                if task.get_name() == "install":
+                    if task.result() != 0:
+                        stderr.write("┃ ⚠️  Install failed\n")
+                        raise SystemExit(1)
+                elif task.get_name() == "backend_ready" and not task.result():
+                    raise SystemExit(1)
+
+        install_proc = None
+
+        # Start Vite dev server
+        stderr.write(f">>> {tool_name} {' '.join(dev_cmd[1:])}\n")
+        frontend_proc = await asyncio.create_subprocess_exec(*dev_cmd, cwd=frontend_cwd)
+
+        # Wait for either process to exit
+        done, pending = await asyncio.wait(
+            {
+                asyncio.create_task(backend_proc.wait(), name="backend"),
+                asyncio.create_task(frontend_proc.wait(), name="frontend"),
+            },
+            return_when=asyncio.FIRST_COMPLETED,
+        )
+        for t in done:
+            t.result()
+        for t in pending:
+            t.cancel()
+
+    except asyncio.CancelledError:
+        stderr.write("\n✓ Shutting down...\n")
+    finally:
+        if frontend_proc is not None:
+            await _terminate_process(frontend_proc, "frontend")
+        if install_proc is not None:
+            await _terminate_process(install_proc, "install")
+        if backend_proc is not None:
+            await _terminate_process(backend_proc, "backend")
+
+
+def main():
+    parser = argparse.ArgumentParser(
+        description="Run Vite and FastAPI development servers",
+        formatter_class=argparse.RawDescriptionHelpFormatter,
+        epilog=EPILOG,
+    )
+    parser.add_argument(
+        "frontend",
+        nargs="?",
+        metavar="host:port",
+        help="Vite frontend endpoint (default: localhost:5173)",
+    )
+    parser.add_argument(
+        "--backend",
+        metavar="host:port",
+        help="FastAPI backend endpoint (default: localhost:5180)",
+    )
+    args = parser.parse_args()
+
+    # parse_endpoint returns list of dicts with host/port or uds keys
+    # Multiple entries means bind all interfaces (IPv4 + IPv6)
+    vite_endpoints = parse_endpoint(args.frontend, DEFAULT_VITE_PORT)
+    backend_endpoints = parse_endpoint(args.backend, DEFAULT_BACKEND_PORT)
+
+    # Vite doesn't support unix sockets
+    if "uds" in vite_endpoints[0]:
+        stderr.write("┃ ⚠️  Unix sockets not supported for frontend\n")
+        raise SystemExit(1)
+    if "uds" in backend_endpoints[0]:
+        stderr.write("┃ ⚠️  Unix sockets not supported for backend\n")
+        raise SystemExit(1)
+
+    vite_port = vite_endpoints[0]["port"]
+    all_ifaces = len(vite_endpoints) > 1
+    backend_host = backend_endpoints[0]["host"]
+    backend_port = backend_endpoints[0]["port"]
+
+    with contextlib.suppress(KeyboardInterrupt):
+        asyncio.run(run_devserver(vite_port, all_ifaces, backend_host, backend_port))
+
+
+if __name__ == "__main__":
+    main()
@@ -6,12 +6,17 @@ not from the installed package. It starts both the Vite frontend dev server
 and the FastAPI backend with auto-reload enabled.

 Usage:
-    uv run scripts/dev.py [host:port] [options...]
+    uv run scripts/devserver.py [host:port] [options...]

 The optional host:port argument sets where the Vite frontend listens.
-All other options are forwarded to `paskia serve`.
+All other options are forwarded to `paskia`.
 Backend always listens on localhost:4402.

+Environment:
+    FASTAPI_VUE_FRONTEND_URL    Set by this script for the backend to know where Vite is.
+    FASTAPI_VUE_BACKEND_URL     Set by this script for Vite to know where to proxy API calls.
+    PASKIA_SITE_URL             User-facing URL for reset links (Caddy HTTPS or Vite HTTP).
+
 Options:
    --caddy         Run Caddy as HTTPS proxy on port 443 (requires sudo)
    --rp-id HOST    Relying Party ID (used as hostname for Caddy)
@@ -118,7 +123,13 @@ def parse_endpoint(
    return host, port, None, False


-def run_vite(vite_url: str, vite_host: str | None, vite_port: int):
+def run_vite(
+    vite_url: str,
+    vite_host: str | None,
+    vite_port: int,
+    env: dict,
+    auth_host: str | None = None,
+):
    """Spawn the frontend dev server (deno, npm, or bunx) as a background process."""
    devpath = Path(__file__).parent.parent / "frontend"
    if not (devpath / "package.json").exists():
@@ -160,7 +171,12 @@ def run_vite(vite_url: str, vite_host: str | None, vite_port: int):

            full_cmd = cmd + vite_args
            stderr.write(f">>> {' '.join([tool_name, *full_cmd[1:]])}\n")
-            vite_process = subprocess.Popen(full_cmd, cwd=str(devpath), shell=False)
+            vite_env = env.copy()
+            if auth_host:
+                vite_env["PASKIA_AUTH_HOST"] = auth_host
+            vite_process = subprocess.Popen(
+                full_cmd, cwd=str(devpath), shell=False, env=vite_env
+            )
        except Exception as e:
            stderr.write(
                f"┃ ⚠️  Vite couldn't start: {e}\n"
@@ -384,25 +400,30 @@ def main():
    if all_ifaces:
        vite_host = "0.0.0.0"

-    # Build Vite URL for PASKIA_DEVMODE (always use localhost for URL)
+    # Build Vite URL for FASTAPI_VUE_FRONTEND_URL (always use localhost for URL)
    vite_url = f"http://localhost:{vite_port}"

    # Compute origins for Caddy (user-specified or auto-generated)
    caddy_origins = []
+    if args.auth_host:
+        auth_host = args.auth_host
+        if "://" not in auth_host:
+            auth_host = f"https://{auth_host}"
+        caddy_origins.append(auth_host)
+        # Also run on rp-id when auth-host is specified
+        caddy_origins.append(f"https://{args.rp_id}")
    if args.origins:
-        # User specified explicit origins - use those
-        caddy_origins = args.origins
-    elif args.caddy:
-        # Caddy mode without explicit origins: add https origin for the hostname
-        if args.auth_host:
-            # auth-host is the primary origin
-            auth_host = args.auth_host
-            if "://" not in auth_host:
-                auth_host = f"https://{auth_host}"
-            caddy_origins.append(auth_host)
-        else:
-            # Use rp-id as the hostname (standard port 443, no port in URL)
-            caddy_origins.append(f"https://{args.rp_id}")
+        for origin in args.origins:
+            if "://" not in origin:
+                origin = f"https://{origin}"
+            caddy_origins.append(origin)
+    # If neither auth-host nor origins specified, run on rp-id
+    if not args.auth_host and not args.origins:
+        caddy_origins.append(f"https://{args.rp_id}")
+
+    # Remove duplicates while preserving order
+    seen = set()
+    caddy_origins = [x for x in caddy_origins if not (x in seen or seen.add(x))]

    # Start Caddy if requested (after computing origins)
    if args.caddy:
@@ -412,15 +433,21 @@ def main():
        if not run_caddy(caddy_origins, vite_port):
            raise SystemExit(1)

-    # Start Vite dev server
-    run_vite(vite_url, vite_host, vite_port)
-
-    # Set dev mode with Vite URL in environment for subprocess
+    # Set dev mode env vars for subprocesses (fastapi-vue convention)
    env = os.environ.copy()
-    env["PASKIA_DEVMODE"] = vite_url
+    env["FASTAPI_VUE_FRONTEND_URL"] = vite_url
+    env["FASTAPI_VUE_BACKEND_URL"] = f"http://localhost:{BACKEND_PORT}"
+    # User-facing URL: Caddy HTTPS when running, else Vite HTTP
+    if args.caddy:
+        env["PASKIA_SITE_URL"] = caddy_origins[0]  # auth-host or https://{rp-id}
+    else:
+        env["PASKIA_SITE_URL"] = vite_url

-    # Build command with origin args
-    cmd = ["paskia", "serve", f"localhost:{BACKEND_PORT}"]
+    # Start Vite dev server
+    run_vite(vite_url, vite_host, vite_port, env, args.auth_host)
+
+    # Build command with origin args (no serve subcommand, host:port is first arg)
+    cmd = ["paskia", f"localhost:{BACKEND_PORT}"]

    # Pass through rp-id (always pass, has default)
    cmd.extend(["--rp-id", args.rp_id])
@@ -429,28 +456,10 @@ def main():
    if args.auth_host:
        cmd.extend(["--auth-host", args.auth_host])

-    # Collect all origins: Caddy origins first (auth-host first), then user origins
-    # Use a set to track and avoid duplicates
-    all_origins = []
-    seen_origins = set(args.origins) if args.origins else set()
-
-    # Add Caddy origins first (they include auth-host origin if configured)
-    if args.caddy:
-        for origin in caddy_origins:
-            if origin not in seen_origins:
-                all_origins.append(origin)
-                seen_origins.add(origin)
-
-    # Add user-specified origins
+    # Pass through origins as specified
    if args.origins:
        for origin in args.origins:
-            if origin not in seen_origins:
-                all_origins.append(origin)
-                seen_origins.add(origin)
-
-    # Pass all origins to backend
-    for origin in all_origins:
-        cmd.extend(["--origin", origin])
+            cmd.extend(["--origin", origin])

    # Add remaining args (ones we didn't parse)
    cmd.extend(remaining)
@@ -0,0 +1,34 @@
+"""Hatch build hook for building Vue frontend during package build."""
+
+import subprocess
+from pathlib import Path
+from sys import stderr
+
+from hatchling.builders.hooks.plugin.interface import BuildHookInterface  # type: ignore
+
+exec(Path(__file__).with_name("util.py").read_text("UTF-8"))  # noqa: S102
+
+
+def run(cmd, **kwargs):
+    """Run a command and display it."""
+    display_cmd = [Path(cmd[0]).name, *cmd[1:]]
+    stderr.write(f"### {' '.join(display_cmd)}\n")
+    subprocess.run(cmd, check=True, **kwargs)
+
+
+class CustomBuildHook(BuildHookInterface):
+    """Build hook that compiles Vue frontend before packaging."""
+
+    def initialize(self, version, build_data):
+        super().initialize(version, build_data)
+        stderr.write(">>> Building the frontend\n")
+
+        install_cmd, build_cmd = find_build_tool()  # noqa # type: ignore
+
+        try:
+            run(install_cmd, cwd="frontend")
+            stderr.write("\n")
+            run(build_cmd, cwd="frontend")
+        except Exception as e:
+            stderr.write(f"Error occurred while building frontend: {e}\n")
+            raise
@@ -0,0 +1,87 @@
+"""Shared utilities for build and dev scripts."""
+
+import os
+import shutil
+from pathlib import Path
+from sys import stderr
+
+
+def find_js_runtime() -> tuple[str, str] | None:
+    """Find a JavaScript runtime from JS_RUNTIME env or auto-detect.
+
+    Returns (tool_path, tool_name) where tool_name is "deno", "npm", or "bun".
+    Returns None if no runtime is found.
+    """
+    options = ["deno", "npm", "bun"]
+
+    # Check for JS_RUNTIME environment variable
+    if js_runtime_env := os.environ.get("JS_RUNTIME"):
+        js_runtime = js_runtime_env
+        js_path = Path(js_runtime)
+        runtime_name = js_path.name
+        # Map node to npm
+        if runtime_name == "node":
+            runtime_name = "npm"
+            js_runtime = str(js_path.parent / "npm") if js_path.parent.name else "npm"
+        for option in options:
+            if option == runtime_name or runtime_name.startswith(option):
+                tool = shutil.which(js_runtime)
+                if tool is None:
+                    stderr.write(f"┃ ⚠️  JS_RUNTIME={js_runtime_env} not found\n")
+                    return None
+                return tool, option
+        stderr.write(f"┃ ⚠️  JS_RUNTIME={js_runtime_env} not recognized\n")
+        return None
+
+    # Auto-detect
+    for option in options:
+        if tool := shutil.which(option):
+            return tool, option
+    return None
+
+
+def find_build_tool():
+    """Find JavaScript runtime and construct install/build commands.
+
+    Returns (install_cmd, build_cmd) tuples of command lists.
+    Raises RuntimeError if no runtime is found.
+    """
+    install = {
+        "deno": ("install", "--allow-scripts=npm:vue-demi"),
+        "npm": ("install",),
+        "bun": ("--bun", "install"),
+    }
+    # Run vite directly for deno to avoid npm-run-all2/run-p issues
+    build = {
+        "deno": ("run", "-A", "npm:vite", "build"),
+        "npm": ("run", "build"),
+        "bun": ("--bun", "run", "build"),
+    }
+
+    result = find_js_runtime()
+    if result is None:
+        raise RuntimeError(
+            "Deno, npm or Bun is required for building but none was found"
+        )
+
+    tool, name = result
+    return [tool, *install[name]], [tool, *build[name]]
+
+
+def find_dev_tool():
+    """Find JavaScript runtime and construct dev command.
+
+    Returns (dev_cmd, tool_name) or (None, None) if not found.
+    """
+    dev_args = {
+        "deno": ("run", "dev", "--"),
+        "npm": ("--silent", "run", "dev", "--"),
+        "bun": ("run", "dev", "--"),
+    }
+
+    result = find_js_runtime()
+    if result is None:
+        return None, None
+
+    tool, name = result
+    return [tool, *dev_args[name]], name
@@ -11,6 +11,7 @@ in the database to test authenticated endpoints.

 import asyncio
 import os
+import tempfile
 from collections.abc import AsyncGenerator
 from datetime import datetime, timezone
 from uuid import UUID
@@ -20,15 +21,26 @@ import pytest
 import pytest_asyncio
 import uuid7

-from paskia import globals
-from paskia.db import Credential, Org, Permission, Role, User
-from paskia.db.sql import DB
+from paskia import globals as paskia_globals
+from paskia.authsession import expires
+from paskia.db import (
+    Credential,
+    Org,
+    Permission,
+    Role,
+    User,
+    add_permission_to_organization,
+    create_credential,
+    create_organization,
+    create_permission,
+    create_reset_token,
+    create_role,
+    create_session,
+    create_user,
+)
+from paskia.db.operations import DB, _create_token
 from paskia.fastapi.session import AUTH_COOKIE_NAME
 from paskia.sansio import Passkey
-from paskia.util.tokens import create_token, session_key
-
-# Use in-memory SQLite for tests
-os.environ["PASKIA_DB"] = "sqlite+aiosqlite:///:memory:"


@pytest.fixture(scope="session")
@@ -41,16 +53,19 @@ def event_loop():

@pytest_asyncio.fixture(scope="function")
 async def test_db() -> AsyncGenerator[DB, None]:
-    """Create an in-memory SQLite database for testing.
+    """Create an in-memory JSON database for testing.

-    We use :memory: for speed - each test gets a fresh database.
+    Uses a temp file that gets cleaned up after each test.
    """
-    db = DB("sqlite+aiosqlite:///:memory:")
-    await db.init_db()
-    globals.db._instance = db
-    yield db
-    # Clean up
-    globals.db._instance = None
+    import paskia.db.operations as ops_db
+
+    with tempfile.NamedTemporaryFile(suffix=".jsonl", delete=True) as f:
+        db = DB(f.name)
+        await db.load()
+        ops_db._db = db
+        yield db
+        # Clean up
+        ops_db._db = None


@pytest_asyncio.fixture(scope="function")
@@ -61,9 +76,9 @@ async def passkey_instance() -> Passkey:
        rp_name="Test RP",
        origins=["http://localhost:4401"],
    )
-    globals.passkey._instance = pk
+    paskia_globals.passkey._instance = pk
    yield pk
-    globals.passkey._instance = None
+    paskia_globals.passkey._instance = None


@pytest_asyncio.fixture(scope="function")
@@ -72,30 +87,53 @@ async def test_org(test_db: DB, admin_permission: Permission) -> Org:
    org = Org(
        uuid=uuid7.create(),
        display_name="Test Organization",
-        permissions=["auth:admin"],  # Org can grant this permission
+        permissions=[str(admin_permission.uuid)],  # Org can grant this permission
    )
-    await test_db.create_organization(org)
+    create_organization(org)
    return org


@pytest_asyncio.fixture(scope="function")
 async def admin_permission(test_db: DB) -> Permission:
    """Create the auth:admin permission."""
-    perm = Permission(id="auth:admin", display_name="Master Admin")
-    await test_db.create_permission(perm)
+    import uuid7
+
+    perm = Permission(
+        uuid=uuid7.create(), scope="auth:admin", display_name="Master Admin"
+    )
+    create_permission(perm)
    return perm


@pytest_asyncio.fixture(scope="function")
-async def test_role(test_db: DB, test_org: Org, admin_permission: Permission) -> Role:
+async def org_admin_permission(test_db: DB, test_org: Org) -> Permission:
+    """Create the auth:org:admin permission."""
+    import uuid7
+
+    perm = Permission(
+        uuid=uuid7.create(), scope="auth:org:admin", display_name="Organization Admin"
+    )
+    create_permission(perm)
+    # Make it grantable by the org
+    add_permission_to_organization(str(test_org.uuid), "auth:org:admin")
+    return perm
+
+
+@pytest_asyncio.fixture(scope="function")
+async def test_role(
+    test_db: DB,
+    test_org: Org,
+    admin_permission: Permission,
+    org_admin_permission: Permission,
+) -> Role:
    """Create a test role with admin permission."""
    role = Role(
        uuid=uuid7.create(),
        org_uuid=test_org.uuid,
        display_name="Test Admin Role",
-        permissions=["auth:admin", f"auth:org:{test_org.uuid}"],
+        permissions=[str(admin_permission.uuid), str(org_admin_permission.uuid)],
    )
-    await test_db.create_role(role)
+    create_role(role)
    return role


@@ -108,7 +146,7 @@ async def user_role(test_db: DB, test_org: Org) -> Role:
        display_name="User Role",
        permissions=[],
    )
-    await test_db.create_role(role)
+    create_role(role)
    return role


@@ -122,7 +160,7 @@ async def test_user(test_db: DB, test_role: Role) -> User:
        created_at=datetime.now(timezone.utc),
        visits=0,
    )
-    await test_db.create_user(user)
+    create_user(user)
    return user


@@ -136,7 +174,7 @@ async def regular_user(test_db: DB, user_role: Role) -> User:
        created_at=datetime.now(timezone.utc),
        visits=0,
    )
-    await test_db.create_user(user)
+    create_user(user)
    return user


@@ -154,7 +192,7 @@ async def test_credential(test_db: DB, test_user: User) -> Credential:
        last_used=None,
        last_verified=None,
    )
-    await test_db.create_credential(credential)
+    create_credential(credential)
    return credential


@@ -172,7 +210,7 @@ async def regular_credential(test_db: DB, regular_user: User) -> Credential:
        last_used=None,
        last_verified=None,
    )
-    await test_db.create_credential(credential)
+    create_credential(credential)
    return credential


@@ -181,15 +219,15 @@ async def session_token(
    test_db: DB, test_user: User, test_credential: Credential
 ) -> str:
    """Create a session for the admin user and return the token."""
-    token = create_token()
-    await test_db.create_session(
+    token = _create_token()
+    create_session(
        user_uuid=test_user.uuid,
        credential_uuid=test_credential.uuid,
-        key=session_key(token),
+        key=token,
        host="localhost:4401",
        ip="127.0.0.1",
        user_agent="pytest",
-        renewed=datetime.now(timezone.utc),
+        expiry=expires(),
    )
    return token

@@ -199,15 +237,15 @@ async def regular_session_token(
    test_db: DB, regular_user: User, regular_credential: Credential
 ) -> str:
    """Create a session for a regular user and return the token."""
-    token = create_token()
-    await test_db.create_session(
+    token = _create_token()
+    create_session(
        user_uuid=regular_user.uuid,
        credential_uuid=regular_credential.uuid,
-        key=session_key(token),
+        key=token,
        host="localhost:4401",
        ip="127.0.0.1",
        user_agent="pytest",
-        renewed=datetime.now(timezone.utc),
+        expiry=expires(),
    )
    return token

@@ -217,12 +255,11 @@ async def reset_token(test_db: DB, test_user: User, test_credential: Credential)
    """Create a reset token for the test user."""
    from paskia.authsession import reset_expires
    from paskia.util.passphrase import generate
-    from paskia.util.tokens import reset_key

    token = generate()
-    await test_db.create_reset_token(
+    create_reset_token(
        user_uuid=test_user.uuid,
-        key=reset_key(token),
+        passphrase=token,
        expiry=reset_expires(),
        token_type="reset",
    )
@@ -19,9 +19,22 @@ import pytest
 import pytest_asyncio
 import uuid7

-from paskia.db import Credential, Org, Permission, Role, User
-from paskia.db.sql import DB
-from paskia.util.tokens import create_token, encode_session_key, session_key
+from paskia.authsession import expires
+from paskia.db import (
+    Credential,
+    Org,
+    Permission,
+    Role,
+    User,
+    add_permission_to_organization,
+    create_credential,
+    create_organization,
+    create_permission,
+    create_role,
+    create_session,
+    create_user,
+)
+from paskia.db.operations import DB, _create_token
 from tests.conftest import auth_headers

 # -------------------- Additional Fixtures --------------------
@@ -35,7 +48,7 @@ async def second_org(test_db: DB) -> Org:
        display_name="Second Organization",
        permissions=[],
    )
-    await test_db.create_organization(org)
+    create_organization(org)
    return org


@@ -48,9 +61,9 @@ async def second_org_role(
        uuid=uuid7.create(),
        org_uuid=second_org.uuid,
        display_name="Second Org Admin Role",
-        permissions=["auth:admin"],
+        permissions=[str(admin_permission.uuid)],
    )
-    await test_db.create_role(role)
+    create_role(role)
    return role


@@ -64,7 +77,7 @@ async def second_org_user(test_db: DB, second_org_role: Role) -> User:
        created_at=datetime.now(timezone.utc),
        visits=0,
    )
-    await test_db.create_user(user)
+    create_user(user)
    return user


@@ -84,7 +97,7 @@ async def second_org_credential(test_db: DB, second_org_user: User) -> Credentia
        last_used=datetime.now(timezone.utc),
        last_verified=datetime.now(timezone.utc),
    )
-    await test_db.create_credential(credential)
+    create_credential(credential)
    return credential


@@ -93,29 +106,31 @@ async def second_org_session_token(
    test_db: DB, second_org_user: User, second_org_credential: Credential
 ) -> str:
    """Create a session for the second org admin user."""
-    token = create_token()
-    await test_db.create_session(
+    token = _create_token()
+    create_session(
        user_uuid=second_org_user.uuid,
        credential_uuid=second_org_credential.uuid,
-        key=session_key(token),
+        key=token,
        host="localhost:4401",
        ip="127.0.0.1",
        user_agent="pytest",
-        renewed=datetime.now(timezone.utc),
+        expiry=expires(),
    )
    return token


@pytest_asyncio.fixture(scope="function")
-async def org_admin_role(test_db: DB, test_org: Org) -> Role:
+async def org_admin_role(
+    test_db: DB, test_org: Org, org_admin_permission: Permission
+) -> Role:
    """Create a role with org admin permission only (no global admin)."""
    role = Role(
        uuid=uuid7.create(),
        org_uuid=test_org.uuid,
        display_name="Org Admin Role",
-        permissions=[f"auth:org:{test_org.uuid}"],
+        permissions=[str(org_admin_permission.uuid)],
    )
-    await test_db.create_role(role)
+    create_role(role)
    return role


@@ -130,7 +145,7 @@ async def org_admin_user(test_db: DB, org_admin_role: Role) -> User:
        visits=5,
        last_seen=datetime.now(timezone.utc),
    )
-    await test_db.create_user(user)
+    create_user(user)
    return user


@@ -150,7 +165,7 @@ async def org_admin_credential(test_db: DB, org_admin_user: User) -> Credential:
        last_used=datetime.now(timezone.utc),
        last_verified=None,
    )
-    await test_db.create_credential(credential)
+    create_credential(credential)
    return credential


@@ -159,15 +174,15 @@ async def org_admin_session_token(
    test_db: DB, org_admin_user: User, org_admin_credential: Credential
 ) -> str:
    """Create a session for the org admin user."""
-    token = create_token()
-    await test_db.create_session(
+    token = _create_token()
+    create_session(
        user_uuid=org_admin_user.uuid,
        credential_uuid=org_admin_credential.uuid,
-        key=session_key(token),
+        key=token,
        host="localhost:4401",
        ip="127.0.0.1",
        user_agent="pytest",
-        renewed=datetime.now(timezone.utc),
+        expiry=expires(),
    )
    return token

@@ -175,10 +190,14 @@ async def org_admin_session_token(
@pytest_asyncio.fixture(scope="function")
 async def grantable_permission(test_db: DB, test_org: Org) -> Permission:
    """Create a permission and add it to org's grantable permissions."""
-    perm = Permission(id="test:grantable:perm", display_name="Grantable Perm")
-    await test_db.create_permission(perm)
+    import uuid7
+
+    perm = Permission(
+        uuid=uuid7.create(), scope="test:grantable:perm", display_name="Grantable Perm"
+    )
+    create_permission(perm)
    # Add to org's grantable permissions
-    await test_db.add_permission_to_organization(str(test_org.uuid), perm.id)
+    add_permission_to_organization(str(test_org.uuid), perm.scope)
    return perm


@@ -333,7 +352,7 @@ class TestAdminOrganizations:
        self, client: httpx.AsyncClient, session_token: str, test_org
    ):
        """Admin should be able to update an organization."""
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}",
            json={"display_name": "Updated Org Name"},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -350,11 +369,10 @@ class TestAdminOrganizations:
        test_org,
    ):
        """Org admin should be able to update their organization."""
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}",
            json={
                "display_name": "Org Admin Updated Name",
-                "permissions": [f"auth:org:{test_org.uuid}"],  # Keep org admin perm
            },
            headers={**auth_headers(org_admin_session_token), "Host": "localhost:4401"},
        )
@@ -371,31 +389,15 @@ class TestAdminOrganizations:
        test_db: DB,
    ):
        """Org admin cannot remove their org admin permission from org's permissions."""
-        # First create and add the org admin perm to the org's grantable perms
-        org_admin_perm_id = f"auth:org:{test_org.uuid}"
-        perm = Permission(id=org_admin_perm_id, display_name="Org Admin")
-        try:
-            await test_db.create_permission(perm)
-        except Exception:
-            pass  # Permission may already exist
+        # The auth:org:admin perm is already created and added by org_admin_permission fixture

-        # Add it to the org's permissions
-        await test_db.add_permission_to_organization(
-            str(test_org.uuid), org_admin_perm_id
-        )
-
-        # Try to remove all permissions including org admin perm
-        response = await client.put(
-            f"/auth/api/admin/orgs/{test_org.uuid}",
-            json={
-                "display_name": "Try Remove Own Perm",
-                "permissions": [],  # Remove org admin perm from org's permissions
-            },
+        # Try to remove org admin perm (this is validated server-side in the remove endpoint)
+        response = await client.delete(
+            f"/auth/api/admin/orgs/{test_org.uuid}/permission?permission_id=auth:org:admin",
            headers={**auth_headers(org_admin_session_token), "Host": "localhost:4401"},
        )
-        assert response.status_code == 400
-        data = response.json()
-        assert "Cannot remove organization admin permission" in data["detail"]
+        # This should fail because only global admin can remove perms from org
+        assert response.status_code == 403

    @pytest.mark.asyncio
    async def test_delete_org_own_org_fails(
@@ -418,19 +420,23 @@ class TestAdminOrganizations:
        test_db: DB,
    ):
        """Admin should be able to delete another organization."""
+        import uuid7
+
        # Create org to delete
        org_to_delete = Org(
            uuid=uuid7.create(),
            display_name="Org To Delete",
            permissions=[],
        )
-        await test_db.create_organization(org_to_delete)
+        create_organization(org_to_delete)

        # Create some org-specific permissions to test cleanup
        org_perm = Permission(
-            id=f"test:org:{org_to_delete.uuid}:feature", display_name="Org Feature"
+            uuid=uuid7.create(),
+            scope=f"test:org:{org_to_delete.uuid}:feature",
+            display_name="Org Feature",
        )
-        await test_db.create_permission(org_perm)
+        create_permission(org_perm)

        response = await client.delete(
            f"/auth/api/admin/orgs/{org_to_delete.uuid}",
@@ -455,7 +461,7 @@ class TestAdminOrgPermissions:
        # First create a permission
        await client.post(
            "/auth/api/admin/permissions",
-            json={"id": "test:org:addable", "display_name": "Addable"},
+            json={"scope": "test:org:addable", "display_name": "Addable"},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )

@@ -490,7 +496,7 @@ class TestAdminOrgPermissions:
        # First create and add a permission
        await client.post(
            "/auth/api/admin/permissions",
-            json={"id": "test:org:removable", "display_name": "Removable"},
+            json={"scope": "test:org:removable", "display_name": "Removable"},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
        await client.post(
@@ -584,7 +590,7 @@ class TestAdminRoles:
            f"/auth/api/admin/orgs/{test_org.uuid}/roles",
            json={
                "display_name": "Role With Perms",
-                "permissions": [grantable_permission.id],
+                "permissions": [grantable_permission.scope],
            },
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
@@ -602,8 +608,14 @@ class TestAdminRoles:
    ):
        """Creating role with non-grantable permission should fail."""
        # Create permission but don't add to org
-        perm = Permission(id="test:not:grantable", display_name="Not Grantable")
-        await test_db.create_permission(perm)
+        import uuid7
+
+        perm = Permission(
+            uuid=uuid7.create(),
+            scope="test:not:grantable",
+            display_name="Not Grantable",
+        )
+        create_permission(perm)

        response = await client.post(
            f"/auth/api/admin/orgs/{test_org.uuid}/roles",
@@ -622,7 +634,7 @@ class TestAdminRoles:
        self, client: httpx.AsyncClient, session_token: str, test_org, test_role
    ):
        """Admin should be able to update a role."""
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/roles/{test_role.uuid}",
            json={"display_name": "Updated Role Name"},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -636,7 +648,7 @@ class TestAdminRoles:
        self, client: httpx.AsyncClient, session_token: str, test_org, second_org_role
    ):
        """Cannot update role from another org."""
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/roles/{second_org_role.uuid}",
            json={"display_name": "Try Update Wrong Org"},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -655,9 +667,8 @@ class TestAdminRoles:
        grantable_permission,
    ):
        """Admin should be able to add grantable permissions to role."""
-        response = await client.put(
-            f"/auth/api/admin/orgs/{test_org.uuid}/roles/{user_role.uuid}",
-            json={"permissions": [grantable_permission.id]},
+        response = await client.post(
+            f"/auth/api/admin/orgs/{test_org.uuid}/roles/{user_role.uuid}/permissions/{grantable_permission.uuid}",
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
        assert response.status_code == 200
@@ -672,12 +683,17 @@ class TestAdminRoles:
        test_db: DB,
    ):
        """Adding non-grantable permission to role should fail."""
-        perm = Permission(id="test:not:grantable:update", display_name="Not Grantable")
-        await test_db.create_permission(perm)
+        import uuid7

-        response = await client.put(
-            f"/auth/api/admin/orgs/{test_org.uuid}/roles/{user_role.uuid}",
-            json={"permissions": ["test:not:grantable:update"]},
+        perm = Permission(
+            uuid=uuid7.create(),
+            scope="test:not:grantable:update",
+            display_name="Not Grantable",
+        )
+        create_permission(perm)
+
+        response = await client.post(
+            f"/auth/api/admin/orgs/{test_org.uuid}/roles/{user_role.uuid}/permissions/{perm.uuid}",
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
        assert response.status_code == 400
@@ -686,17 +702,31 @@ class TestAdminRoles:

    @pytest.mark.asyncio
    async def test_update_own_role_cannot_remove_admin(
-        self, client: httpx.AsyncClient, session_token: str, test_org, test_role
+        self,
+        client: httpx.AsyncClient,
+        session_token: str,
+        test_org,
+        test_role,
+        admin_permission,
+        org_admin_permission,
    ):
        """Admin cannot remove their own admin permissions."""
-        response = await client.put(
-            f"/auth/api/admin/orgs/{test_org.uuid}/roles/{test_role.uuid}",
-            json={"permissions": []},  # Remove all permissions
+        # test_role has both auth:admin and auth:org:admin
+        # Remove auth:admin first (should succeed since org:admin remains)
+        response = await client.delete(
+            f"/auth/api/admin/orgs/{test_org.uuid}/roles/{test_role.uuid}/permissions/{admin_permission.uuid}",
+            headers={**auth_headers(session_token), "Host": "localhost:4401"},
+        )
+        assert response.status_code == 200
+
+        # Now try to remove auth:org:admin (should fail - would leave no admin access)
+        response = await client.delete(
+            f"/auth/api/admin/orgs/{test_org.uuid}/roles/{test_role.uuid}/permissions/{org_admin_permission.uuid}",
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
        assert response.status_code == 400
        data = response.json()
-        assert "Cannot update your own role" in data["detail"]
+        assert "Cannot remove your own admin permissions" in data["detail"]

    @pytest.mark.asyncio
    async def test_delete_role(
@@ -853,7 +883,7 @@ class TestAdminUsersInOrg:
        self, client: httpx.AsyncClient, session_token: str, test_org, test_user
    ):
        """Admin should be able to update user display name."""
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{test_user.uuid}/display-name",
            json={"display_name": "Updated Admin Name"},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -866,7 +896,7 @@ class TestAdminUsersInOrg:
    ):
        """Updating non-existent user should return 404."""
        fake_uuid = uuid7.create()
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{fake_uuid}/display-name",
            json={"display_name": "New Name"},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -880,7 +910,7 @@ class TestAdminUsersInOrg:
        self, client: httpx.AsyncClient, session_token: str, test_org, second_org_user
    ):
        """Updating user from another org should return 404."""
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{second_org_user.uuid}/display-name",
            json={"display_name": "New Name"},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -892,7 +922,7 @@ class TestAdminUsersInOrg:
        self, client: httpx.AsyncClient, session_token: str, test_org, test_user
    ):
        """Updating user with empty display name should fail."""
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{test_user.uuid}/display-name",
            json={"display_name": "   "},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -906,7 +936,7 @@ class TestAdminUsersInOrg:
        self, client: httpx.AsyncClient, session_token: str, test_org, test_user
    ):
        """Updating user with too long display name should fail."""
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{test_user.uuid}/display-name",
            json={"display_name": "x" * 100},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -926,7 +956,7 @@ class TestAdminUsersInOrg:
    ):
        """Admin should be able to change user's role within org."""
        # Use regular_user who is in the same org but not the session owner
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{regular_user.uuid}/role",
            json={"role": user_role.display_name},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -938,7 +968,7 @@ class TestAdminUsersInOrg:
        self, client: httpx.AsyncClient, session_token: str, test_org, test_user
    ):
        """Updating user role without specifying role should fail."""
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{test_user.uuid}/role",
            json={},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -953,7 +983,7 @@ class TestAdminUsersInOrg:
    ):
        """Updating role for non-existent user should fail."""
        fake_uuid = uuid7.create()
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{fake_uuid}/role",
            json={"role": "User Role"},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -967,7 +997,7 @@ class TestAdminUsersInOrg:
        self, client: httpx.AsyncClient, session_token: str, test_org, second_org_user
    ):
        """Updating role for user in another org should fail."""
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{second_org_user.uuid}/role",
            json={"role": "User Role"},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -981,7 +1011,7 @@ class TestAdminUsersInOrg:
        self, client: httpx.AsyncClient, session_token: str, test_org, test_user
    ):
        """Updating user to non-existent role should fail."""
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{test_user.uuid}/role",
            json={"role": "Nonexistent Role"},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -1000,7 +1030,7 @@ class TestAdminUsersInOrg:
        user_role,
    ):
        """Admin cannot change their own role to non-admin role."""
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{org_admin_user.uuid}/role",
            json={"role": user_role.display_name},
            headers={**auth_headers(org_admin_session_token), "Host": "localhost:4401"},
@@ -1021,7 +1051,7 @@ class TestAdminUsersInOrg:
        """Admin can change their own role to another admin role."""
        # test_user is already on test_role which has auth:admin
        # Changing to the same role should succeed (no permission loss)
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{test_user.uuid}/role",
            json={"role": test_role.display_name},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -1087,7 +1117,7 @@ class TestAdminUsersInOrg:
            created_at=datetime.now(timezone.utc),
            visits=0,
        )
-        await test_db.create_user(user_no_cred)
+        create_user(user_no_cred)

        response = await client.post(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{user_no_cred.uuid}/create-link",
@@ -1172,21 +1202,19 @@ class TestAdminSessions:
    ):
        """Admin should be able to delete a user's session."""
        # Create an additional session to delete
-        extra_token = create_token()
-        extra_key = session_key(extra_token)
-        await test_db.create_session(
+        extra_token = _create_token()
+        create_session(
            user_uuid=test_user.uuid,
            credential_uuid=test_credential.uuid,
-            key=extra_key,
+            key=extra_token,
            host="other.host:4401",
            ip="192.168.1.1",
            user_agent="other-agent",
-            renewed=datetime.now(timezone.utc),
+            expiry=expires(),
        )

-        encoded_key = encode_session_key(extra_key)
        response = await client.delete(
-            f"/auth/api/admin/orgs/{test_org.uuid}/users/{test_user.uuid}/sessions/{encoded_key}",
+            f"/auth/api/admin/orgs/{test_org.uuid}/users/{test_user.uuid}/sessions/{extra_token}",
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
        assert response.status_code == 200
@@ -1203,9 +1231,8 @@ class TestAdminSessions:
        test_user,
    ):
        """Admin can delete their own current session."""
-        encoded_key = encode_session_key(session_key(session_token))
        response = await client.delete(
-            f"/auth/api/admin/orgs/{test_org.uuid}/users/{test_user.uuid}/sessions/{encoded_key}",
+            f"/auth/api/admin/orgs/{test_org.uuid}/users/{test_user.uuid}/sessions/{session_token}",
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
        assert response.status_code == 200
@@ -1245,14 +1272,14 @@ class TestAdminSessions:
    async def test_delete_session_invalid_id(
        self, client: httpx.AsyncClient, session_token: str, test_org, test_user
    ):
-        """Deleting session with invalid ID format should fail."""
+        """Deleting session with invalid/non-existent ID should fail."""
        response = await client.delete(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{test_user.uuid}/sessions/invalid!!id",
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
-        assert response.status_code == 400
+        assert response.status_code == 404
        data = response.json()
-        assert "Invalid session identifier" in data["detail"]
+        assert "Session not found" in data["detail"]

    @pytest.mark.asyncio
    async def test_delete_session_not_found(
@@ -1260,10 +1287,9 @@ class TestAdminSessions:
    ):
        """Deleting non-existent session should fail."""
        # Use a valid format but non-existent key
-        fake_key = session_key(create_token())
-        encoded_key = encode_session_key(fake_key)
+        fake_token = _create_token()
        response = await client.delete(
-            f"/auth/api/admin/orgs/{test_org.uuid}/users/{test_user.uuid}/sessions/{encoded_key}",
+            f"/auth/api/admin/orgs/{test_org.uuid}/users/{test_user.uuid}/sessions/{fake_token}",
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
        assert response.status_code == 404
@@ -1290,8 +1316,8 @@ class TestAdminPermissions:
        data = response.json()
        assert isinstance(data, list)
        # Should include at least auth:admin
-        perm_ids = [p["id"] for p in data]
-        assert "auth:admin" in perm_ids
+        perm_scopes = [p["scope"] for p in data]
+        assert "auth:admin" in perm_scopes

    @pytest.mark.asyncio
    async def test_list_permissions_org_admin(
@@ -1301,7 +1327,7 @@ class TestAdminPermissions:
        test_org,
        grantable_permission,
    ):
-        """Org admin should only see grantable permissions."""
+        """Org admin should only see permissions their org can grant."""
        response = await client.get(
            "/auth/api/admin/permissions",
            headers={**auth_headers(org_admin_session_token), "Host": "localhost:4401"},
@@ -1309,10 +1335,12 @@ class TestAdminPermissions:
        assert response.status_code == 200
        data = response.json()
        # Should only see permissions the org can grant
-        perm_ids = [p["id"] for p in data]
-        assert grantable_permission.id in perm_ids
-        # Should NOT see auth:admin (not grantable by org)
-        assert "auth:admin" not in perm_ids
+        perm_scopes = [p["scope"] for p in data]
+        assert grantable_permission.scope in perm_scopes
+        # test_org CAN grant auth:admin (it's in org.permissions), so org admin sees it
+        assert "auth:admin" in perm_scopes
+        # Should also see auto-created org admin permission
+        assert "auth:org:admin" in perm_scopes

    @pytest.mark.asyncio
    async def test_create_permission(
@@ -1321,7 +1349,7 @@ class TestAdminPermissions:
        """Admin should be able to create new permissions."""
        response = await client.post(
            "/auth/api/admin/permissions",
-            json={"id": "test:create:permission", "display_name": "Test Permission"},
+            json={"scope": "test:create:permission", "display_name": "Test Permission"},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
        assert response.status_code == 200
@@ -1349,7 +1377,7 @@ class TestAdminPermissions:
        """Creating permission without admin should fail."""
        response = await client.post(
            "/auth/api/admin/permissions",
-            json={"id": "test:forbidden", "display_name": "Forbidden"},
+            json={"scope": "test:forbidden", "display_name": "Forbidden"},
            headers={
                **auth_headers(regular_session_token),
                "Host": "localhost:4401",
@@ -1363,10 +1391,14 @@ class TestAdminPermissions:
    ):
        """Admin should be able to update a permission."""
        # Create permission first
-        perm = Permission(id="test:updateable", display_name="Updateable")
-        await test_db.create_permission(perm)
+        import uuid7

-        response = await client.put(
+        perm = Permission(
+            uuid=uuid7.create(), scope="test:updateable", display_name="Updateable"
+        )
+        create_permission(perm)
+
+        response = await client.patch(
            "/auth/api/admin/permission?permission_id=test:updateable&display_name=Updated%20Name",
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
@@ -1376,10 +1408,18 @@ class TestAdminPermissions:

    @pytest.mark.asyncio
    async def test_update_permission_empty_name(
-        self, client: httpx.AsyncClient, session_token: str
+        self, client: httpx.AsyncClient, session_token: str, test_db: DB
    ):
        """Updating permission with empty name should fail."""
-        response = await client.put(
+        # Create permission first
+        import uuid7
+
+        perm = Permission(
+            uuid=uuid7.create(), scope="test:perm", display_name="Test Perm"
+        )
+        create_permission(perm)
+
+        response = await client.patch(
            "/auth/api/admin/permission?permission_id=test:perm&display_name=",
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
@@ -1393,12 +1433,16 @@ class TestAdminPermissions:
    ):
        """Admin should be able to rename a permission."""
        # Create permission first
-        perm = Permission(id="test:renameable2", display_name="Renameable")
-        await test_db.create_permission(perm)
+        import uuid7
+
+        perm = Permission(
+            uuid=uuid7.create(), scope="test:renameable2", display_name="Renameable"
+        )
+        create_permission(perm)

        response = await client.post(
            "/auth/api/admin/permission/rename",
-            json={"old_id": "test:renameable2", "new_id": "test:renamed2"},
+            json={"old_scope": "test:renameable2", "new_scope": "test:renamed2"},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
        assert response.status_code == 200
@@ -1436,14 +1480,18 @@ class TestAdminPermissions:
        self, client: httpx.AsyncClient, session_token: str, test_db: DB
    ):
        """Renaming permission can also update display name."""
-        perm = Permission(id="test:rename:withname", display_name="Old Name")
-        await test_db.create_permission(perm)
+        import uuid7
+
+        perm = Permission(
+            uuid=uuid7.create(), scope="test:rename:withname", display_name="Old Name"
+        )
+        create_permission(perm)

        response = await client.post(
            "/auth/api/admin/permission/rename",
            json={
-                "old_id": "test:rename:withname",
-                "new_id": "test:renamed:withname",
+                "old_scope": "test:rename:withname",
+                "new_scope": "test:renamed:withname",
                "display_name": "New Display Name",
            },
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -1456,8 +1504,12 @@ class TestAdminPermissions:
    ):
        """Admin should be able to delete a permission."""
        # Create permission first
-        perm = Permission(id="test:deleteable", display_name="Deleteable")
-        await test_db.create_permission(perm)
+        import uuid7
+
+        perm = Permission(
+            uuid=uuid7.create(), scope="test:deleteable", display_name="Deleteable"
+        )
+        create_permission(perm)

        response = await client.delete(
            "/auth/api/admin/permission?permission_id=test:deleteable",
@@ -1468,17 +1520,81 @@ class TestAdminPermissions:
        assert data["status"] == "ok"

    @pytest.mark.asyncio
-    async def test_delete_permission_auth_admin_fails(
+    async def test_delete_permission_auth_admin_last_one_fails(
        self, client: httpx.AsyncClient, session_token: str
    ):
-        """Cannot delete the auth:admin permission."""
+        """Cannot delete the only auth:admin permission (would lock out admin)."""
        response = await client.delete(
            "/auth/api/admin/permission?permission_id=auth:admin",
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
        assert response.status_code == 400
        data = response.json()
-        assert "Cannot delete the master admin" in data["detail"]
+        assert "lock you out of admin access" in data["detail"]
+
+    @pytest.mark.asyncio
+    async def test_delete_permission_auth_admin_with_another_succeeds(
+        self, client: httpx.AsyncClient, session_token: str, test_db: DB
+    ):
+        """Can delete an auth:admin permission if another accessible one exists."""
+        import uuid7
+
+        from paskia.db import Permission
+
+        # Create a second auth:admin permission (no domain restriction)
+        perm2 = Permission(
+            uuid=uuid7.create(), scope="auth:admin", display_name="Secondary Admin"
+        )
+        create_permission(perm2)
+
+        # Now we can delete the original one
+        response = await client.delete(
+            "/auth/api/admin/permission?permission_id=auth:admin",
+            headers={**auth_headers(session_token), "Host": "localhost:4401"},
+        )
+        assert response.status_code == 200
+        data = response.json()
+        assert data["status"] == "ok"
+
+    @pytest.mark.asyncio
+    async def test_delete_permission_auth_admin_domain_mismatch_fails(
+        self, client: httpx.AsyncClient, session_token: str, test_db: DB
+    ):
+        """Cannot delete auth:admin if remaining one has mismatched domain."""
+        import uuid7
+
+        from paskia.db import Permission
+
+        # Create a second auth:admin permission with a different domain
+        perm2 = Permission(
+            uuid=uuid7.create(),
+            scope="auth:admin",
+            display_name="Other Domain Admin",
+            domain="other.example.com",
+        )
+        create_permission(perm2)
+
+        # Cannot delete the original one because the remaining one is not accessible
+        response = await client.delete(
+            "/auth/api/admin/permission?permission_id=auth:admin",
+            headers={**auth_headers(session_token), "Host": "localhost:4401"},
+        )
+        assert response.status_code == 400
+        data = response.json()
+        assert "lock you out of admin access" in data["detail"]
+
+    @pytest.mark.asyncio
+    async def test_remove_auth_admin_from_own_org_fails(
+        self, client: httpx.AsyncClient, session_token: str, test_org
+    ):
+        """Cannot remove auth:admin permission from your own organization."""
+        response = await client.delete(
+            f"/auth/api/admin/orgs/{test_org.uuid}/permission?permission_id=auth:admin",
+            headers={**auth_headers(session_token), "Host": "localhost:4401"},
+        )
+        assert response.status_code == 400
+        data = response.json()
+        assert "lock you out of admin access" in data["detail"]


 # -------------------- Edge Cases for AuthException in Org-Admin Checks --------------------
@@ -1526,7 +1642,7 @@ class TestOrgAdminAuthExceptions:
        test_user,
    ):
        """Regular user trying to update display name should get 403."""
-        response = await client.put(
+        response = await client.patch(
            f"/auth/api/admin/orgs/{test_org.uuid}/users/{test_user.uuid}/display-name",
            json={"display_name": "New Name"},
            headers={**auth_headers(regular_session_token), "Host": "localhost:4401"},
@@ -15,6 +15,7 @@ from datetime import datetime, timezone
 import httpx
 import pytest

+from paskia.db import create_session, delete_session
 from tests.conftest import auth_headers


@@ -292,12 +293,12 @@ class TestSetSessionEndpoint:
    """Tests for POST /auth/api/set-session"""

    @pytest.mark.asyncio
-    async def test_set_session_without_bearer_returns_403(
+    async def test_set_session_without_bearer_returns_401(
        self, client: httpx.AsyncClient
    ):
-        """Set session without bearer token should return 403."""
+        """Set session without bearer token should return 401."""
        response = await client.post("/auth/api/set-session")
-        assert response.status_code == 403
+        assert response.status_code == 401

    @pytest.mark.asyncio
    async def test_set_session_with_valid_bearer_token(
@@ -498,10 +499,10 @@ class TestValidateSessionRefresh:
        self, client: httpx.AsyncClient, test_db
    ):
        """Validate should handle session expiry during refresh attempt."""
-        from paskia.util.tokens import create_token
+        from paskia.db.operations import _create_token

        # Create a token but don't create a session for it
-        token = create_token()
+        token = _create_token()
        response = await client.post(
            "/auth/api/validate",
            headers={**auth_headers(token), "Host": "localhost:4401"},
@@ -520,23 +521,24 @@ class TestValidateSessionRefresh:
        """Validate should return 401 if session disappears during refresh."""
        from datetime import timedelta

-        from paskia.util.tokens import create_token, session_key
+        from paskia.authsession import EXPIRES
+        from paskia.db.operations import _create_token

-        # Create a session with an old renewed time to trigger refresh
-        token = create_token()
-        old_time = datetime.now(timezone.utc) - timedelta(minutes=10)
-        await test_db.create_session(
+        # Create a session with an old expiry time to trigger refresh
+        token = _create_token()
+        old_expiry = datetime.now(timezone.utc) + EXPIRES - timedelta(minutes=10)
+        create_session(
            user_uuid=test_user.uuid,
            credential_uuid=test_credential.uuid,
-            key=session_key(token),
+            key=token,
            host="localhost:4401",
            ip="127.0.0.1",
            user_agent="pytest",
-            renewed=old_time,
+            expiry=old_expiry,
        )

        # Delete the session right before validate tries to refresh
-        await test_db.delete_session(session_key(token))
+        delete_session(token)

        response = await client.post(
            "/auth/api/validate",
@@ -16,12 +16,12 @@ from tests.conftest import auth_headers


 class TestUserDisplayName:
-    """Tests for PUT /auth/api/user/display-name"""
+    """Tests for PATCH /auth/api/user/display-name"""

    @pytest.mark.asyncio
    async def test_update_display_name_requires_auth(self, client: httpx.AsyncClient):
        """Update display name without auth should return 401."""
-        response = await client.put(
+        response = await client.patch(
            "/auth/api/user/display-name",
            json={"display_name": "New Name"},
        )
@@ -32,7 +32,7 @@ class TestUserDisplayName:
        self, client: httpx.AsyncClient, session_token: str
    ):
        """User should be able to update their display name."""
-        response = await client.put(
+        response = await client.patch(
            "/auth/api/user/display-name",
            json={"display_name": "Updated Name"},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -46,7 +46,7 @@ class TestUserDisplayName:
        self, client: httpx.AsyncClient, session_token: str
    ):
        """Empty display name should fail."""
-        response = await client.put(
+        response = await client.patch(
            "/auth/api/user/display-name",
            json={"display_name": ""},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -59,7 +59,7 @@ class TestUserDisplayName:
    ):
        """Display name over 64 chars should fail."""
        long_name = "x" * 100
-        response = await client.put(
+        response = await client.patch(
            "/auth/api/user/display-name",
            json={"display_name": long_name},
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
@@ -117,7 +117,7 @@ class TestUserSessionManagement:
            "/auth/api/user/session/invalid-session-id",
            headers={**auth_headers(session_token), "Host": "localhost:4401"},
        )
-        assert response.status_code == 400
+        assert response.status_code == 404  # Not found (no format validation)

    @pytest.mark.asyncio
    async def test_delete_nonexistent_session_returns_404(
Author	SHA1	Message	Date
LeoVasanko	fbc6108b7a	Fix frontend-build location. Cleanup.	2026-01-25 03:26:22 +00:00
LeoVasanko	6e649f1f07	Fix test expected HTTP code.	2026-01-25 03:20:28 +00:00
LeoVasanko	8d68e5d237	Add missing set_session_host on dunder all.	2026-01-25 03:17:32 +00:00
LeoVasanko	5ee7443801	Use fastapi-vue-setup, merging its template scripts to old Paskia entry point and devserver. Simplified CLI, no longer uses serve subcommand. Fixed the URL displayed on banner to show to actual frontend/caddy server even in devmode.	2026-01-25 03:15:50 +00:00
LeoVasanko	2100a7e14f	Logging cleanup, linter.	2026-01-24 01:08:00 +00:00
LeoVasanko	aae33e60ce	Fix errors where permission scopes were still expected for indexing.	2026-01-24 00:58:18 +00:00
LeoVasanko	cebef8adfc	Large refactoring for better JSONL context. Switched back the urlsafe for session tokens that need to be passed in URLs. Other minor fixes.	2026-01-24 00:40:32 +00:00
LeoVasanko	57a9c60557	Don't load existing JSONL on migrate.	2026-01-24 00:08:21 +00:00
LeoVasanko	a9ef20969e	Refer permissions by UUID rather than scope.	2026-01-24 00:06:08 +00:00
LeoVasanko	57748876cb	Debug JSONL updates.	2026-01-23 23:49:11 +00:00
LeoVasanko	ba552e24cd	Debug JSONL updates.	2026-01-23 23:41:47 +00:00
LeoVasanko	dbe4149b63	Debug JSONL updates.	2026-01-23 23:35:00 +00:00
LeoVasanko	3d5f82c3df	Debug JSONL updates.	2026-01-23 23:29:47 +00:00
LeoVasanko	2a005692ee	Fixes to JSONL management, starting from empty state rather than default DB.	2026-01-23 21:31:54 +00:00
LeoVasanko	2ec6314264	Simplify session and reset token formats; removes the token utility functions entirely.	2026-01-23 20:53:03 +00:00
LeoVasanko	ae4c982a30	Fix actor fields and transactions for API operations as they are recorded to DB.	2026-01-23 20:19:33 +00:00
LeoVasanko	c2933d60c2	Update migrate script with the latest database changes.	2026-01-23 19:56:44 +00:00
LeoVasanko	d4ebc1bf99	Record user UUID as actor for API access.	2026-01-23 19:55:54 +00:00
LeoVasanko	0f857ffb78	Cleanup, add database versioning.	2026-01-23 19:22:23 +00:00
LeoVasanko	b7ebe68665	Refactor to use UUID and bytes rather than str keys in msgspec structs because the module can automatically convert these.	2026-01-23 18:47:56 +00:00
LeoVasanko	f9d23a196c	Database refactor to separate modules.	2026-01-23 18:27:12 +00:00
LeoVasanko	2c6a5c72d9	Updated database to use async background worker, making changes lock-free synchronous ops.	2026-01-23 15:57:16 +00:00
LeoVasanko	c13044c085	Change PUT to PATCH for intent-based updates, avoiding override of fields not intended to change. This preserves role permissions matrix even if the permission is temporarily removed from the org.	2026-01-23 15:41:23 +00:00
LeoVasanko	2c783498a4	Better handling of Org Admin permission. More guardrails for Master Admin not locking himself out by changes. Admin app UI improvements.	2026-01-23 15:11:01 +00:00
LeoVasanko	3430c7f0cf	Permissions refactor. Permissions have UUID and scope (previously id) and the latter no longer needs to be unique. Org admin uses a single global permission now. Domain scoped permissions. Removed from user info the admin fields, use effective_permission checks instead.	2026-01-23 13:54:31 +00:00
LeoVasanko	236d52aa55	Replace session.renewed with .expiry for consistency with other expiring items. Fix migration script.	2026-01-23 01:39:59 +00:00
LeoVasanko	02e04da2c4	Database cleanup: make it synchronous because we work with in-memory data. Defer writes to disk and cleanup to background task. Tests passing.	2026-01-23 01:22:47 +00:00
LeoVasanko	7f3763b46d	Replace SQL database with JSONL based solution that keeps history.	2026-01-23 00:54:37 +00:00
LeoVasanko	0fe55b2b62	Update docs/Caddy.md	2025-12-19 22:53:10 +00:00
LeoVasanko	ccf71bf0a3	Docs updates.	2025-12-19 21:09:56 +00:00
LeoVasanko	cdaeecb179	Docs updates.	2025-12-19 21:08:40 +00:00
LeoVasanko	82cdee51e4	Docs updates.	2025-12-19 21:07:20 +00:00
LeoVasanko	851e0793a6	Docs updates.	2025-12-19 21:06:27 +00:00
LeoVasanko	cd681a0599	Docs updates.	2025-12-19 21:01:05 +00:00
LeoVasanko	71cb01cfda	Docs updates.	2025-12-19 21:00:16 +00:00
LeoVasanko	535ac8558d	Docs updates.	2025-12-19 20:59:16 +00:00
LeoVasanko	c64554aeda	Docs updates.	2025-12-19 20:56:47 +00:00
LeoVasanko	0bc1bae26c	Docs updates.	2025-12-19 20:54:44 +00:00
LeoVasanko	156231b142	Docs updates.	2025-12-19 20:52:38 +00:00
LeoVasanko	daf397b3b5	Docs updates.	2025-12-19 20:38:49 +00:00
LeoVasanko	a1a5ad8520	Docs updates.	2025-12-19 20:37:25 +00:00
LeoVasanko	d25124d30b	Docs updates.	2025-12-19 20:23:49 +00:00
LeoVasanko	0bfb035f76	Docs updates.	2025-12-19 18:34:12 +00:00
LeoVasanko	000501b718	Add missing max-age argument to validate endpoint.	2025-12-19 18:34:01 +00:00
LeoVasanko	5a57e78814	Docs updates.	2025-12-19 18:17:28 +00:00
LeoVasanko	e5b84dd28c	Docs updates.	2025-12-19 17:34:09 +00:00
LeoVasanko	4b01fd9e7a	Docs updates.	2025-12-19 17:28:54 +00:00
LeoVasanko	431c48f1dd	Docs updates.	2025-12-19 16:06:51 +00:00
LeoVasanko	03c966919f	README formatting and links.	2025-12-19 14:59:22 +00:00
LeoVasanko	2795b1061f	Info fields for PyPI	2025-12-18 14:13:05 +00:00
LeoVasanko	9230344eb5	Remove layout max width.	2025-12-10 20:53:59 +00:00
LeoVasanko	8992cff473	Fix dialog patterns in admin app: dialog must close before doing API calls to avoid conflict with authentication dialogs.	2025-12-10 20:42:12 +00:00
LeoVasanko	1e91b84d3d	Cleanup on Admin app, better delete confirmations.	2025-12-10 20:16:57 +00:00
LeoVasanko	851b17f45c	Adopt <dialog> for our modals to tap into browser built-in functionality.	2025-12-10 19:41:55 +00:00
LeoVasanko	cdb9691b59	Revised light color scheme for a more professional look.	2025-12-10 19:40:59 +00:00
LeoVasanko	720d875eb5	UX: Close the QR code/link dialog automatically when the code is click-to-copied.	2025-12-10 19:07:56 +00:00
LeoVasanko	ac560172ff	Fix regression from adding color-scheme: light dark improperly at :root (html) rather than at body.	2025-12-10 18:47:56 +00:00
LeoVasanko	091f20a666	Use absolute paths for resources so that the links work when Vite is serving these at root instead of /auth/	2025-12-10 18:30:45 +00:00
LeoVasanko	9930608359	Improved breadcrumbs on auth host.	2025-12-10 18:20:37 +00:00
LeoVasanko	4a753ca29b	Vite devserver configuration that behaves correctly for auth-host, serving the profile view at site root and /admin/ instead of under /auth/.	2025-12-10 18:18:14 +00:00
LeoVasanko	2d797454de	Fix button row layout problem from the responsive layout cleanup before, that was causing them display stretched to full window width. Now they only shrink.	2025-12-10 17:43:10 +00:00
LeoVasanko	a8ffd629ff	Fix devserver script misprocessing in some situations where auth-host was being used. Deduplicate origins on server end.	2025-12-10 17:39:09 +00:00
LeoVasanko	3f0de04a49	Fix link copy toast messages, remove custom toast in favor of authStore, remove a component that was no longer used.	2025-12-10 17:18:48 +00:00
LeoVasanko	460094e4dd	Change input placeholder that was improperly triggering Bitwarden to complete username in it. BW does not respect autocomplete at all.	2025-12-10 16:56:19 +00:00
LeoVasanko	cff62a1904	Fix mobile browser code word autocomplete (on space that wasn't detected correctly).	2025-12-10 16:40:58 +00:00
LeoVasanko	ea63b7236c	Automatic light/dark mode. Fixes a cursor color issue on Huawei Browser, and is generally a good idea.	2025-12-10 16:40:54 +00:00
LeoVasanko	8bb00f01c4	Simplify responsive layouts. Remove button vertical stacking and always fit them on the same row.	2025-12-10 16:11:43 +00:00
LeoVasanko	ca73febe2f	Implement keyboard navigation using arrow keys in the whole application. (#2 )	2025-12-10 15:43:40 +00:00
LeoVasanko	7f47f44039	Fix scrolling behaviour when backdrop dialogs appear.	2025-12-10 12:07:43 +00:00
LeoVasanko	f6c315d0dc	Improved session group (per site) styling and UX.	2025-12-10 01:11:43 +00:00
LeoVasanko	504e1d0fc5	Consistent use of red X only for deletion, and using only it for deletion rather than trashbin, while using non-red X for window close button.	2025-12-10 00:06:34 +00:00
LeoVasanko	a8269df0b4	Cleaner up registration link creation. Don't show the dialog until when there is a valid link. Implement a global blur backdrop with nicer effect and proper scrollbar handling (avoiding layout shifting a bit). Use the global backdrop to ensure consistent visuals between authentication and the modal being shown, along with in/out transitions.	2025-12-09 23:58:04 +00:00
LeoVasanko	d58a88c43a	Code word input overhaul, more accurate cursor and selection processing. New styling for the widget that conforms with browser default style (focus outline).	2025-12-09 23:07:15 +00:00
LeoVasanko	087b24388c	Fix regressions with the remote-auth preventing it from working. Minor usability and style improvements. Changed /auth/api/ws/pair name to permit, to go with other parts of the software.	2025-12-09 21:57:33 +00:00
LeoVasanko	9b491164fd	Profile view UX improvements. More consistent styling across the application.	2025-12-09 21:20:29 +00:00
LeoVasanko	bb34e52997	Remove different responsive styling applied to logout buttons making them appear too wide. Now all buttons behave the same.	2025-12-09 17:04:20 +00:00
LeoVasanko	b9897b62b8	Remove trash bin icons from tab order. Instead, implement Delete key support (Backspace accepted on Apple devices).	2025-12-09 16:54:46 +00:00
LeoVasanko	8a21edf367	Process IPv6 display into short format including only the network prefix, and sharing the same code also for comparisons where needed.	2025-12-09 16:33:16 +00:00
LeoVasanko	03368b1b84	Rename base64 functions such that imports don't need renaming.	2025-12-09 15:55:03 +00:00
LeoVasanko	bfc5b11cc2	Fix missing credential_uuid in admin user detail API that was causing linkage between sessions and their passkeys not show up.	2025-12-09 15:34:05 +00:00