Fix dialog patterns in admin app: dialog must close before doing API calls to avoid conflict with authentication dialogs.

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

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

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

.gitignore

@@ -3,6 +3,7 @@ dist/
 .*
 !.gitignore
 *.lock
+package-lock.json
 paskia.sqlite
 /paskia/frontend-build
 /paskia/_version.py

frontend/auth/admin/AdminApp.vue

@@ -3,7 +3,6 @@ import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import CredentialList from '@/components/CredentialList.vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
-import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
 import StatusMessage from '@/components/StatusMessage.vue'
 import LoadingView from '@/components/LoadingView.vue'
 import AuthRequiredMessage from '@/components/AccessDenied.vue'
@@ -14,6 +13,7 @@ import AdminDialogs from '@/admin/AdminDialogs.vue'
 import { useAuthStore } from '@/stores/auth'
 import { getSettings, adminUiPath, makeUiHref } from '@/utils/settings'
 import { apiJson } from '@/utils/api'
+import { getDirection } from '@/utils/keynav'
 
 const info = ref(null)
 const loading = ref(true)
@@ -26,8 +26,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:._~-]+$'
@@ -36,8 +34,18 @@ const renameIdValue = ref('')
 const editingPermDisplay = ref(null)
 const renameDisplayValue = ref('')
 const dialog = ref({ type: null, data: null, busy: false, error: '' })
+const dialogPreviousFocus = ref(null)  // Track element that had focus before dialog opened
 const safeIdRegex = /[^A-Za-z0-9:._~-]/g
 
+// Template refs for navigation
+const breadcrumbsRef = ref(null)
+const adminOverviewRef = ref(null)
+const adminOrgDetailRef = ref(null)
+const adminUserDetailRef = ref(null)
+
+// Check if any modal/dialog is open (blocks arrow key navigation)
+const hasActiveModal = computed(() => dialog.value.type !== null || showRegModal.value)
+
 function sanitizeRenameId() { if (renameIdValue.value) renameIdValue.value = renameIdValue.value.replace(safeIdRegex, '') }
 
 function handleGlobalClick(e) {
@@ -102,33 +110,6 @@ const permissionSummary = computed(() => {
 
 function renamePermissionDisplay(p) { openDialog('perm-display', { permission: p, id: p.id, display_name: p.display_name }) }
 
-async function refreshPermissionsContext() {
-  // Reload both lists so All Permissions table shows new associations promptly.
-  await Promise.all([loadPermissions(), loadOrgs()])
-}
-
-async function attachPermissionToOrg(pid, orgUuid) {
-  if (!orgUuid) return
-  try {
-    const params = new URLSearchParams({ permission_id: pid })
-    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 || ''
@@ -199,11 +180,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' })
+  const userCount = org.roles.reduce((acc, r) => acc + r.users.length, 0)
-    await Promise.all([loadOrgs(), loadPermissions()])
+
+  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)
   } })
 }
 
@@ -242,21 +249,21 @@ 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 () => {
+  // UI only allows deleting empty roles, so no confirmation needed
-    await apiJson(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'DELETE' })
+  apiJson(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'DELETE' })
-    await loadOrgs()
+    .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) {
@@ -282,13 +289,44 @@ async function toggleRolePermission(role, pid, checked) {
 }
 
 // Permission actions
-function updatePermission(p) { openDialog('perm-display', { permission: p }) }
+async function performPermissionDeletion(permissionId) {
+  const params = new URLSearchParams({ permission_id: permissionId })
+  await apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'DELETE' })
+  await loadPermissions()
+}
 
 function deletePermission(p) {
-  openDialog('confirm', { message: `Delete permission ${p.id}?`, action: async () => {
+  const userCount = permissionSummary.value[p.id]?.userCount || 0
-    const params = new URLSearchParams({ permission_id: p.id })
+
-    await apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'DELETE' })
+  // Count roles that have this permission
-    await loadPermissions()
+  let roleCount = 0
+  for (const org of orgs.value) {
+    for (const role of org.roles) {
+      if (role.permissions.includes(p.id)) {
+        roleCount++
+      }
+    }
+  }
+
+  if (roleCount === 0) {
+    // No roles have this permission, safe to delete directly
+    performPermissionDeletion(p.id)
+      .then(() => {
+        authStore.showMessage(`Permission "${p.display_name}" deleted.`, 'success', 2500)
+      })
+      .catch(e => {
+        authStore.showMessage(e.message || 'Failed to delete permission', 'error')
+      })
+    return
+  }
+
+  const parts = []
+  if (roleCount > 0) parts.push(`${roleCount} role${roleCount !== 1 ? 's' : ''}`)
+  if (userCount > 0) parts.push(`${userCount} user${userCount !== 1 ? 's' : ''}`)
+  const affects = parts.join(', ')
+
+  openDialog('confirm', { message: `Delete permission "${p.display_name}" (${affects})?`, action: async () => {
+    await performPermissionDeletion(p.id)
   } })
 }
 
@@ -362,20 +400,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)
@@ -395,8 +419,107 @@ async function toggleOrgPermission(org, permId, checked) {
   }
 }
 
-function openDialog(type, data) { dialog.value = { type, data, busy: false, error: '' } }
+function openDialog(type, data) {
-function closeDialog() { dialog.value = { type: null, data: null, busy: false, error: '' } }
+  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()
@@ -419,28 +542,88 @@ 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: 'PUT', body: { display_name: name, permissions: org.permissions } })
+        .then(() => {
+          authStore.showMessage(`Organization renamed to "${name}".`, 'success', 2500)
+          loadOrgs()
+        })
+        .catch(e => {
+          authStore.showMessage(e.message || 'Failed to update organization', 'error')
+        })
+      return // Don't call closeDialog() again
     } else if (t === 'role-create') {
       const { org } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      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: 'PUT', body: { display_name: name, permissions: role.permissions } })
+        .then(() => {
+          authStore.showMessage(`Role renamed to "${name}".`, 'success', 2500)
+          loadOrgs()
+        })
+        .catch(e => {
+          authStore.showMessage(e.message || 'Failed to update role', 'error')
+        })
+      return // Don't call closeDialog() again
     } else if (t === 'user-create') {
       const { org, role } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      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: 'PUT', body: { display_name: name } })
+        .then(() => {
+          authStore.showMessage(`User renamed to "${name}".`, 'success', 2500)
+          onUserNameSaved()
+        })
+        .catch(e => {
+          authStore.showMessage(e.message || 'Failed to update user name', 'error')
+        })
+      return // Don't call closeDialog() again
     } else if (t === 'perm-display') {
       const { permission } = dialog.value.data
       const newId = dialog.value.data.id?.trim()
@@ -448,20 +631,45 @@ async function submitDialog() {
       if (!newDisplay) throw new Error('Display name required')
       if (!newId) throw new Error('ID required')
 
+      // Close dialog immediately, then perform async operation
+      closeDialog()
+
+      let apiCall;
       if (newId !== permission.id) {
         // ID changed, use rename endpoint
-        await apiJson('/auth/api/admin/permission/rename', { method: 'POST', body: { old_id: permission.id, new_id: newId, display_name: newDisplay } })
+        apiCall = apiJson('/auth/api/admin/permission/rename', { method: 'POST', body: { old_id: permission.id, new_id: newId, display_name: newDisplay } })
       } else if (newDisplay !== permission.display_name) {
         // Only display name changed
         const params = new URLSearchParams({ permission_id: permission.id, display_name: newDisplay })
-        await apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'PUT' })
+        apiCall = apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'PUT' })
+      } else {
+        // No changes
+        return
       }
-      await loadPermissions()
+
-    } else if (t === 'perm-create') {
+      apiCall
+        .then(() => {
+          authStore.showMessage(`Permission "${newDisplay}" updated.`, 'success', 2500)
+          loadPermissions()
+        })
+        .catch(e => {
+          authStore.showMessage(e.message || 'Failed to update permission', 'error')
+        })
+      return // Don't call closeDialog() again else if (t === 'perm-create') {
       const id = dialog.value.data.id?.trim(); if (!id) throw new Error('ID required')
       const display_name = dialog.value.data.display_name?.trim(); if (!display_name) throw new Error('Display name required')
-      await apiJson('/auth/api/admin/permissions', { method: 'POST', body: { id, display_name } })
+
-      await loadPermissions(); dialog.value.data.display_name = ''; dialog.value.data.id = ''
+      // Close dialog immediately, then perform async operation
+      closeDialog()
+      apiJson('/auth/api/admin/permissions', { method: 'POST', body: { id, display_name } })
+        .then(() => {
+          authStore.showMessage(`Permission "${display_name}" created.`, 'success', 2500)
+          loadPermissions()
+        })
+        .catch(e => {
+          authStore.showMessage(e.message || 'Failed to create permission', 'error')
+        })
+      return // Don't call closeDialog() again
     } else if (t === 'confirm') {
       const action = dialog.value.data.action; if (action) await action()
     }
@@ -484,7 +692,7 @@ async function submitDialog() {
       <section v-else-if="authenticated && (info?.is_global_admin || info?.is_org_admin)" class="view-root view-root--wide view-admin">
         <header class="view-header">
           <h1>{{ pageHeading }}</h1>
-          <Breadcrumbs :entries="breadcrumbEntries" />
+          <Breadcrumbs ref="breadcrumbsRef" :entries="breadcrumbEntries" @keydown="handleBreadcrumbKeydown" />
         </header>
 
         <section class="section-block admin-section">
@@ -493,9 +701,11 @@ async function submitDialog() {
             <div v-else class="admin-panels">
                                   <AdminOverview
                   v-if="!selectedUser && !selectedOrg && (info.is_global_admin || info.is_org_admin)"
+                  ref="adminOverviewRef"
                   :info="info"
                   :orgs="orgs"
                   :permissions="permissions"
+                  :navigation-disabled="hasActiveModal"
                   :permission-summary="permissionSummary"
                   @create-org="createOrg"
                   @open-org="openOrg"
@@ -505,15 +715,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"
@@ -521,11 +734,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"
@@ -534,6 +750,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"
                 />

frontend/auth/admin/index.html

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

frontend/auth/admin/main.js

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

frontend/auth/index.html

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

frontend/auth/main.js

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

frontend/auth/restricted/RestrictedApi.vue

@@ -1,15 +1,35 @@
 <template>
   <RestrictedAuth
     :mode="authMode"
+    :remote-auth-token="remoteAuthToken"
     @authenticated="handleAuthenticated"
     @back="handleBack"
   />
 </template>
 
 <script setup>
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import RestrictedAuth from '@/components/RestrictedAuth.vue'
 
+// Check if this is a remote auth URL: /auth/{token}
+// The token is a 5-word passphrase like "word1.word2.word3.word4.word5"
+const remoteAuthToken = ref(null)
+
+function extractRemoteToken() {
+  const path = window.location.pathname
+  // Match /auth/{token} where token is a passphrase with dots
+  const match = path.match(/\/auth\/([^/]+)$/)
+  if (match) {
+    const token = match[1]
+    // Validate it looks like a 5-word passphrase
+    const parts = token.split('.')
+    if (parts.length === 5 && parts.every(p => p.length > 0)) {
+      return token
+    }
+  }
+  return null
+}
+
 // Detect mode from URL hash fragment
 const authMode = computed(() => {
   const params = new URLSearchParams(window.location.hash.slice(1))
@@ -40,6 +60,9 @@ function handleBack() {
 }
 
 onMounted(() => {
+  // Check for remote auth token in URL
+  remoteAuthToken.value = extractRemoteToken()
+
   postToParent({
     type: 'auth-ready'
   })

frontend/auth/restricted/index.html

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

frontend/auth/restricted/main.js

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

frontend/int/forward/main.js

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

frontend/int/reset/ResetApp.vue

@@ -23,7 +23,6 @@
 
         <section class="section-block" v-else-if="!canRegister">
           <div class="section-body center">
-            <p>{{ errorMessage }}</p>
             <div class="button-row center" style="justify-content: center;">
               <button class="btn-secondary" @click="goHome">Return to sign-in</button>
             </div>
@@ -80,7 +79,7 @@ let statusTimer = null
 const sessionDescriptor = computed(() => userInfo.value?.session_type || 'your enrollment')
 const subtitleMessage = computed(() => {
   if (initializing.value) return 'Preparing your secure enrollment…'
-  if (!canRegister.value) return 'This reset link is no longer valid.'
+  if (!canRegister.value) return 'This authentication link is no longer valid.'
   return `Finish up ${sessionDescriptor.value}. You may edit the name below if needed, and it will be saved to your passkey.`
 })
 
@@ -120,10 +119,9 @@ async function fetchUserInfo() {
   } catch (error) {
     console.error('Failed to load user info', error)
     const message = error instanceof ApiError
-      ? (error.data?.detail || 'Reset link is invalid or expired.')
+      ? (error.data?.detail || 'The authentication link is invalid or expired.')
       : getUserFriendlyErrorMessage(error)
     errorMessage.value = message
-    showMessage(message, 'error', 0)
   }
 }
 

frontend/int/reset/main.js

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

frontend/src/admin/AdminDialogs.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { ref, watch, nextTick } from 'vue'
 import Modal from '@/components/Modal.vue'
 import NameEditForm from '@/components/NameEditForm.vue'
 
@@ -10,25 +9,7 @@ const props = defineProps({
 
 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()
-      }
-    })
-  }
-})
 </script>
 
 <template>
@@ -92,7 +73,7 @@ watch(() => props.dialog.type, (newType) => {
             <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:._~-" />
+            <input v-model="dialog.data.id" :placeholder="dialog.type === 'perm-create' ? 'yourapp:permission' : dialog.data.permission.id" required :pattern="PERMISSION_ID_PATTERN" title="Allowed: A-Za-z0-9:._~-" data-form-type="other" />
           </label>
           <p class="small muted">The permission ID is used for permission checks in the application. Changing it may break deployed applications that reference this permission.</p>
         </template>

frontend/src/admin/AdminOrgDetail.vue

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

frontend/src/admin/AdminOverview.vue

@@ -1,14 +1,24 @@
 <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)
@@ -27,15 +37,219 @@ 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' && props.info.is_global_admin) {
+      // Navigate to permissions matrix or actions
+      if (permMatrixRef.value) {
+        const firstCheckbox = permMatrixRef.value.querySelector('input[type="checkbox"]')
+        if (firstCheckbox) firstCheckbox.focus()
+        else focusPreferred(permActionsRef.value, { itemSelector: 'button' })
+      }
+    }
+    return
+  }
+
+  if (newIndex !== currentIndex) {
+    event.preventDefault()
+    const newRow = rows[newIndex]
+    const focusable = newRow.querySelector('a, button:not([disabled])')
+    if (focusable) focusable.focus()
+  }
+}
+
+// Handle org actions button keynav
+function handleOrgActionsKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(orgActionsRef.value, event.target, direction, { itemSelector: 'button' })
+  } else if (direction === 'up') {
+    emit('navigateOut', 'up')
+  } else if (direction === 'down') {
+    // Move to org table
+    const firstFocusable = orgTableRef.value?.querySelector('tbody tr a, tbody tr button:not([disabled])')
+    if (firstFocusable) firstFocusable.focus()
+  }
+}
+
+// Handle permission matrix grid navigation
+function handleMatrixKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  const target = event.target
+  if (target.tagName !== 'INPUT') return
+
+  event.preventDefault()
+
+  const checkboxes = Array.from(permMatrixRef.value.querySelectorAll('input[type="checkbox"]'))
+  const currentIndex = checkboxes.indexOf(target)
+  if (currentIndex === -1) return
+
+  // Calculate grid dimensions
+  const cols = sortedOrgs.value.length
+  const rows = sortedPermissions.value.length
+
+  if (cols === 0 || rows === 0) return
+
+  const currentRow = Math.floor(currentIndex / cols)
+  const currentCol = currentIndex % cols
+
+  let newIndex = currentIndex
+  if (direction === 'left') {
+    if (currentCol > 0) {
+      // Move left within the same row
+      newIndex = currentIndex - 1
+    }
+    // At leftmost column, do nothing (no wrap)
+  } else if (direction === 'right') {
+    if (currentCol < cols - 1) {
+      // Move right within the same row
+      newIndex = currentIndex + 1
+    }
+    // At rightmost column, do nothing (no wrap)
+  } else if (direction === 'up') {
+    if (currentRow > 0) {
+      // Move up within the same column
+      newIndex = currentIndex - cols
+    } else {
+      // At top row, navigate up to org table
+      const lastRow = orgTableRef.value?.querySelector('tbody tr:last-child')
+      const focusable = lastRow?.querySelector('a, button:not([disabled])')
+      if (focusable) focusable.focus()
+      return
+    }
+  } else if (direction === 'down') {
+    if (currentRow < rows - 1) {
+      // Move down within the same column
+      newIndex = currentIndex + cols
+    } else {
+      // At bottom row, navigate down to permission actions
+      focusPreferred(permActionsRef.value, { itemSelector: 'button' })
+      return
+    }
+  }
+
+  if (newIndex !== currentIndex && checkboxes[newIndex]) {
+    checkboxes[newIndex].focus()
+  }
+}
+
+// Handle permission actions button keynav
+function handlePermActionsKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(permActionsRef.value, event.target, direction, { itemSelector: 'button' })
+  } else if (direction === 'up') {
+    // Move to first column of last row in matrix
+    const checkboxes = permMatrixRef.value?.querySelectorAll('input[type="checkbox"]')
+    if (checkboxes?.length) {
+      const cols = sortedOrgs.value.length
+      const rows = sortedPermissions.value.length
+      // First checkbox of last row = (rows - 1) * cols
+      const lastRowFirstIndex = (rows - 1) * cols
+      if (checkboxes[lastRowFirstIndex]) {
+        checkboxes[lastRowFirstIndex].focus()
+      } else {
+        checkboxes[0].focus()
+      }
+    } else {
+      // No matrix, go to org table
+      const lastRow = orgTableRef.value?.querySelector('tbody tr:last-child')
+      const focusable = lastRow?.querySelector('a, button:not([disabled])')
+      if (focusable) focusable.focus()
+    }
+  } else if (direction === 'down') {
+    // Move to permissions table
+    const firstFocusable = permTableRef.value?.querySelector('tbody tr button:not([disabled])')
+    if (firstFocusable) firstFocusable.focus()
+  }
+}
+
+// Focus helper for external navigation
+function focusFirstElement() {
+  if (props.info.is_global_admin) {
+    focusPreferred(orgActionsRef.value, { itemSelector: 'button' })
+  } else {
+    const firstFocusable = orgTableRef.value?.querySelector('tbody tr a, tbody tr button:not([disabled])')
+    if (firstFocusable) firstFocusable.focus()
+  }
+}
+
+defineExpose({ focusFirstElement })
 </script>
 
 <template>
-  <div class="permissions-section">
+  <div class="permissions-section" ref="orgSection">
     <h2>{{ info.is_global_admin ? 'Organizations' : 'Your Organizations' }}</h2>
-    <div class="actions">
+    <div class="actions" ref="orgActionsRef" @keydown="handleOrgActionsKeydown">
       <button v-if="info.is_global_admin" @click="$emit('createOrg')">+ Create Org</button>
     </div>
-    <table class="org-table">
+    <table class="org-table" ref="orgTableRef" @keydown="e => handleTableKeydown(e, 'org')">
       <thead>
         <tr>
           <th>Name</th>
@@ -62,7 +276,7 @@ function getRoleNames(org) {
 
   <div v-if="info.is_global_admin" 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"
@@ -98,10 +312,10 @@ function getRoleNames(org) {
       </div>
       <p class="matrix-hint muted">Toggle which permissions each organization can grant to its members.</p>
     </div>
-    <div class="actions">
+    <div class="actions" ref="permActionsRef" @keydown="handlePermActionsKeydown">
       <button v-if="info.is_global_admin" @click="$emit('openDialog', 'perm-create', { display_name: '', id: '' })">+ Create Permission</button>
     </div>
-    <table class="org-table">
+    <table class="org-table" ref="permTableRef" @keydown="e => handleTableKeydown(e, 'perm')">
         <thead>
           <tr>
             <th scope="col">Permission</th>

frontend/src/admin/AdminUserDetail.vue

@@ -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
+    <div ref="userInfoRef" @keydown="handleUserInfoKeydown">
-      v-if="userDetail && !userDetail.error"
+      <UserBasicInfo
-      :name="userDetail.display_name || selectedUser.display_name"
+        v-if="userDetail && !userDetail.error"
-      :visits="userDetail.visits"
+        :name="userDetail.display_name || selectedUser.display_name"
-      :created-at="userDetail.created_at"
+        :visits="userDetail.visits"
-      :last-seen="userDetail.last_seen"
+        :created-at="userDetail.created_at"
-      :loading="loading"
+        :last-seen="userDetail.last_seen"
-      :org-display-name="userDetail.org.display_name"
+        :loading="loading"
-      :role-name="userDetail.role"
+        :org-display-name="userDetail.org.display_name"
-      :update-endpoint="`/auth/api/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/display-name`"
+        :role-name="userDetail.role"
-      @saved="$emit('onUserNameSaved')"
+        :update-endpoint="`/auth/api/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/display-name`"
-      @edit-name="handleEditName"
+        @saved="$emit('onUserNameSaved')"
-    />
+        @edit-name="handleEditName"
-    <div v-else-if="userDetail?.error" class="error small">{{ userDetail.error }}</div>
+      />
+    </div>
+    <div v-if="userDetail?.error" class="error small">{{ userDetail.error }}</div>
     <template v-if="userDetail && !userDetail.error">
-      <div class="registration-actions">
+      <div class="registration-actions" ref="regActionsRef" @keydown="handleRegActionsKeydown">
         <button
           class="btn-secondary reg-token-btn"
           @click="$emit('generateUserRegistrationLink', selectedUser)"
@@ -106,33 +207,38 @@ 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
       v-if="showRegModal"
       :endpoint="`/auth/api/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/create-link`"
-      :auto-copy="false"
       :user-name="userDetail?.display_name || selectedUser.display_name"
       @close="$emit('closeRegModal')"
       @copied="onLinkCopied"

frontend/src/assets/style.css

@@ -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-canvas: #ffffff;
-  --color-surface: #ffffff;
+  --color-surface: #eff6ff;
-  --color-surface-subtle: #f1f3f7;
+  --color-surface-subtle: #dbeafe;
-  --color-border: #d0d5dd;
+  --color-border: #2563eb;
-  --color-border-strong: #9aa2af;
+  --color-border-strong: #1e40af;
-  --color-heading: #101828;
+  --color-heading: #1e3a8a;
-  --color-text: #1f2933;
+  --color-text: #1e293b;
-  --color-text-muted: #52616b;
+  --color-text-muted: #475569;
-  --color-link: #2563eb;
+  --color-link: #1d4ed8;
-  --color-link-hover: #1d4ed8;
+  --color-link-hover: #1e40af;
   --color-accent: #2563eb;
-  --color-accent-strong: #1e3faa;
+  --color-accent-strong: #1e40af;
   --color-accent-contrast: #ffffff;
-  --color-success-text: #0f5132;
+  --color-success-text: #166534;
-  --color-success-bg: #d1fadf;
+  --color-success-bg: #dcfce7;
-  --color-error-text: #b42318;
+  --color-error-text: #b91c1c;
-  --color-error-bg: #ffe3e3;
+  --color-error-bg: #fee2e2;
-  --color-info-text: #0f609b;
+  --color-info-text: #1e40af;
-  --color-info-bg: #d6ecff;
+  --color-info-bg: #dbeafe;
   --color-danger: #dc2626;
-  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
+  --shadow-soft: 0 10px 30px rgba(30, 64, 175, 0.15);
   --radius-none: 0;
   --radius-sm: 4px;
   --radius-md: 6px;
@@ -37,6 +37,7 @@
   --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 +47,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 +73,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 +89,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 +117,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 {
@@ -187,13 +189,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 +225,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 +233,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 +271,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 +293,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 +352,13 @@ th {
 .global-status {
   position: fixed;
   top: 1.5rem;
-  left: 50%;
+  left: 0;
-  transform: translateX(-50%);
+  right: 0;
+  margin: 0 auto;
   z-index: 1200;
-  min-width: min(520px, calc(100vw - 2rem));
+  width: fit-content;
+  min-width: min(520px, calc(100% - 2rem));
+  max-width: calc(100% - 2rem);
   display: none;
 }
 
@@ -388,10 +395,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;
@@ -422,9 +430,9 @@ th {
 }
 
 .qr-code {
-  border: 1px solid var(--color-border);
+  padding: 1rem;
-  padding: 0.75rem;
+  background: #fff;
-  background: var(--color-surface);
+  box-shadow: var(--shadow-soft);
 }
 
 .link-container,
@@ -437,7 +445,7 @@ th {
   color: var(--color-text);
 }
 
-:root { --card-width: 22rem; }
+:root { --card-width: 16rem; }
 
 .record-list,
 .credential-list,
@@ -447,9 +455,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 +470,7 @@ th {
 .session-item {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  padding: 0.5rem;
-  padding: 1rem;
-  border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-surface);
   height: 100%;
@@ -484,15 +491,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 +512,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 +519,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 +542,30 @@ th {
 .item-actions .badge + .badge { margin-left: 0.25rem; }
 
 .item-details {
-  margin-left: calc(40px + 1rem);
+  margin-left: 40px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.credential-dates {
-  display: grid;
-  grid-auto-flow: row;
-  grid-template-columns: 7rem 1fr;
-  gap: 0.35rem 0.5rem;
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  align-items: center;
 }
 
+.credential-dates,
 .session-dates {
   display: grid;
   grid-auto-flow: row;
-  grid-template-columns: 7rem 1fr;
+  grid-template-columns: 8em 1fr;
-  gap: 0.35rem 0.5rem;
   font-size: 0.75rem;
-  color: var(--color-text-muted);
   align-items: center;
 }
 
 .date-label {
   font-weight: 500;
-  color: inherit;
+  color: var(--color-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .date-value {
   color: var(--color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .btn-card-delete { background: transparent; border: none; color: var(--color-danger); padding: 0.35rem 0.5rem; font-size: 1.05rem; line-height: 1; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
@@ -572,12 +576,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 +645,18 @@ th {
 }
 
 .user-info {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  padding: 1.1rem 1.25rem;
   display: grid;
-  grid-template-columns: auto 1fr;
+  border-radius: var(--radius-md);
-  gap: 0.75rem 1.25rem;
+  background: var(--color-surface);
+  padding: 1.1rem 1.25rem;
 }
 
-.user-info h3 {
+.user-details {
-  margin: 0;
+  display: grid;
-  grid-column: span 2;
+  grid-template-columns: 7em 1fr;
-  display: flex;
+  gap: 0 0.5rem;
-  align-items: center;
+  padding-left: 40px;
-  gap: 0.5rem;
+  font-size: 0.75rem;
-  font-size: 1.15rem;
-  font-weight: 600;
-}
-
-.user-info span {
-  text-align: left;
-  color: var(--color-text);
 }
 
 .toggle-link {
@@ -653,25 +678,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 +733,28 @@ th {
   }
 }
 
-/* Auth iframe overlay styles */
+/* Global backdrop controlled by api.js ref-counting */
-body:has(#auth-iframe) {
+body::before {
-  overflow: hidden;
+  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 +767,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;
 }

frontend/src/components/Breadcrumbs.vue

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

frontend/src/components/CredentialList.vue

@@ -1,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'"
+              :title="credential.is_current_session ? 'Cannot delete current session credential' : 'Delete passkey and terminate any linked sessions.'"
-            >🗑️</button>
+              tabindex="-1"
+            >❌</button>
           </div>
         </div>
         <div class="item-details">
@@ -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>

frontend/src/components/DeviceLinkView.vue

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

frontend/src/components/HostProfileView.vue

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

frontend/src/components/Modal.vue

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

frontend/src/components/NameEditForm.vue

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

frontend/src/components/ProfileView.vue

@@ -1,14 +1,15 @@
 <template>
   <section class="view-root" data-view="profile">
     <header class="view-header">
-      <h1>👋 Welcome!</h1>
+      <h1>User Profile</h1>
-      <Breadcrumbs :entries="breadcrumbEntries" />
+      <Breadcrumbs ref="breadcrumbs" :entries="breadcrumbEntries" @keydown="handleBreadcrumbKeydown" />
-      <p class="view-lede">Manage your account details and passkeys.</p>
+      <p class="view-lede">Account dashboard for managing credentials and authenticating with other devices.</p>
     </header>
 
-    <section class="section-block">
+    <section class="section-block" ref="userInfoSection">
       <UserBasicInfo
         v-if="authStore.userInfo?.user"
+        ref="userBasicInfo"
         :name="authStore.userInfo.user.user_name"
         :visits="authStore.userInfo.user.visits || 0"
         :created-at="authStore.userInfo.user.created_at"
@@ -17,39 +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:</label>
+          <RemoteAuthPermit
+            ref="pairingEntry"
+            title=""
+            description=""
+            @completed="handlePairingCompleted"
+            @error="handlePairingError"
+            @device-info-visible="showDeviceInfo = $event"
+          />
+        </div>
+        <p class="remote-auth-description">Provided by another device requesting remote auth.</p>
+      </UserBasicInfo>
     </section>
 
     <section class="section-block">
       <div class="section-header">
         <h2>Your Passkeys</h2>
-        <p class="section-description">Keep at least one trusted passkey so you can always sign in.</p>
+        <p class="section-description">Ideally have at least two passkeys in case you lose one. More than one user can be registered on the same device, giving you a choice at login. <a href="https://bitwarden.com/pricing/" target="_blank" rel="noopener noreferrer">Bitwarden</a> can sync one passkey to all your devices. Other secure options include <b>local passkeys</b>, as well as hardware keys such as <a href="https://www.yubico.com" target="_blank" rel="noopener noreferrer">YubiKey</a>. Cloud sync via Google, Microsoft or iCloud is discouraged.</p>
       </div>
       <div class="section-body">
         <CredentialList
+          ref="credentialList"
           :credentials="authStore.userInfo?.credentials || []"
           :aaguid-info="authStore.userInfo?.aaguid_info || {}"
           :loading="authStore.isLoading"
           :hovered-credential-uuid="hoveredCredentialUuid"
           :hovered-session-credential-uuid="hoveredSession?.credential_uuid"
+          :navigation-disabled="hasActiveModal"
           allow-delete
           @delete="handleDelete"
           @credential-hover="hoveredCredentialUuid = $event"
+          @navigate-out="handleCredentialNavigateOut"
         />
-        <div class="button-row">
+        <div class="button-row" ref="credentialButtons">
-          <button @click="addNewCredential" class="btn-primary">Add New Passkey</button>
+          <button @click="addNewCredential" class="btn-primary" @keydown="handleCredentialButtonKeydown">Register New</button>
-          <button @click="showRegLink = true" class="btn-secondary">Add Another Device</button>
+          <button @click="showRegLink = true" class="btn-secondary" @keydown="handleCredentialButtonKeydown">Another Device</button>
         </div>
       </div>
     </section>
 
     <SessionList
+      ref="sessionList"
       :sessions="sessions"
       :terminating-sessions="terminatingSessions"
       :hovered-credential-uuid="hoveredCredentialUuid"
+      :navigation-disabled="hasActiveModal"
       @terminate="terminateSession"
       @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">
@@ -65,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="logout" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">Logout</button>
-          <button @click="logoutEverywhere" class="btn-danger logout-button" :disabled="authStore.isLoading">All</button>
+          <button @click="logoutEverywhere" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">All</button>
         </template>
       </div>
       <p class="logout-note" v-if="!hasMultipleSessions"><strong>Logout</strong> from {{ currentSessionHost }}.</p>
@@ -84,11 +106,9 @@
     </section>
     <RegistrationLinkModal
       v-if="showRegLink"
-              :endpoint="'/auth/api/user/create-link'"
+      endpoint="/auth/api/user/create-link"
-      :auto-copy="false"
-      :prefix-copy-with-user-name="false"
       @close="showRegLink = false"
-      @copied="showRegLink = false; authStore.showMessage('Link copied to clipboard!', 'success', 2500)"
+      @copied="onLinkCopied"
     />
   </section>
 </template>
@@ -102,11 +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 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)
@@ -116,6 +138,18 @@ const newName = ref('')
 const saving = ref(false)
 const hoveredCredentialUuid = ref(null)
 const hoveredSession = ref(null)
+const showDeviceInfo = ref(false)
+const pairingEntry = ref(null)
+const credentialList = ref(null)
+const credentialButtons = ref(null)
+const sessionList = ref(null)
+const logoutButtons = ref(null)
+const breadcrumbs = ref(null)
+const userBasicInfo = ref(null)
+const userInfoSection = ref(null)
+
+// Check if any modal/dialog is open (blocks arrow key navigation)
+const hasActiveModal = computed(() => showNameDialog.value || showRegLink.value)
 
 watch(showNameDialog, (newVal) => { if (newVal) newName.value = authStore.userInfo?.user?.user_name || '' })
 
@@ -138,13 +172,131 @@ const addNewCredential = async () => {
   }
 }
 
+const handlePairingCompleted = () => {
+  authStore.showMessage('The other device is now signed in!', 'success', 4000)
+  // Reset the form after a delay
+  setTimeout(() => pairingEntry.value?.reset(), 3000)
+}
+
+const handlePairingError = (message) => {
+  // Error is already shown in the component, optionally show global message for severe errors
+  if (!message.includes('cancelled')) {
+    authStore.showMessage(message, 'error', 4000)
+  }
+}
+
+const onLinkCopied = () => {
+  authStore.showMessage('📋 Link copied! Send it to your other device.')
+  showRegLink.value = false
+}
+
+// Helper to focus preferred button in a row (primary first, or first button)
+const focusPreferredButton = (container) => {
+  focusPreferred(container, { primarySelector: '.btn-primary', itemSelector: 'button' })
+}
+
+// Navigation between components
+const handleBreadcrumbKeydown = (event) => {
+  if (hasActiveModal.value) return  // Block navigation when modal is open
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  // Left/right handled internally by Breadcrumbs component
+  if (direction === 'down') {
+    event.preventDefault()
+    // Move to user info section - always focus edit button first
+    focusPreferred(userInfoSection.value, { primarySelector: '.mini-btn', itemSelector: '.mini-btn, .pairing-input' })
+  }
+  // ArrowUp at the top does nothing
+}
+
+const handleUserInfoKeydown = (event) => {
+  if (hasActiveModal.value) return  // Block navigation when modal is open
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+  const itemSelector = '.mini-btn, .pairing-input'
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(userInfoSection.value, event.target, direction, { itemSelector })
+  } else if (direction === 'up') {
+    // Move to breadcrumbs - focus current page crumb
+    breadcrumbs.value?.focusCurrent?.()
+  } else if (direction === 'down') {
+    // Move to credential list
+    credentialList.value?.$el?.focus()
+  }
+}
+
+const handleCredentialNavigateOut = (direction) => {
+  if (hasActiveModal.value) return  // Block navigation when modal is open
+
+  if (direction === 'down' || direction === 'right') {
+    // Focus preferred button in credential section
+    focusPreferredButton(credentialButtons.value)
+  } else if (direction === 'up' || direction === 'left') {
+    // Focus user info section - always focus edit button first
+    focusPreferred(userInfoSection.value, { primarySelector: '.mini-btn', itemSelector: '.mini-btn, .pairing-input' })
+  }
+}
+
+const handleCredentialButtonKeydown = (event) => {
+  if (hasActiveModal.value) return  // Block navigation when modal is open
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(credentialButtons.value, event.target, direction, { itemSelector: 'button' })
+  } else if (direction === 'up') {
+    // Move back to credential list
+    focusAtIndex(credentialList.value?.$el, 0, { itemSelector: '.credential-item' })
+  } else if (direction === 'down') {
+    // Move to session list
+    focusAtIndex(sessionList.value?.$el, 0, { itemSelector: '.session-group' })
+  }
+}
+
+const handleSessionNavigateOut = (direction) => {
+  if (hasActiveModal.value) return  // Block navigation when modal is open
+
+  if (direction === 'up') {
+    // Focus preferred button in credential section
+    focusPreferredButton(credentialButtons.value)
+  } else if (direction === 'down') {
+    // Focus preferred button in logout section
+    focusPreferredButton(logoutButtons.value)
+  }
+}
+
+const handleLogoutButtonKeydown = (event) => {
+  if (hasActiveModal.value) return  // Block navigation when modal is open
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(logoutButtons.value, event.target, direction, { itemSelector: 'button' })
+  } else if (direction === 'up') {
+    // Move back to session list - focus last group
+    focusAtIndex(sessionList.value?.$el, -1, { itemSelector: '.session-group' })
+  }
+  // ArrowDown at the bottom does nothing
+}
+
 const handleDelete = async (credential) => {
   const credentialId = credential?.credential_uuid
   if (!credentialId) return
-  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') }
 }
 
@@ -193,11 +345,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; }
-@media (max-width: 720px) { .logout-button { width: 100%; } }
+.remote-auth-inline { display: flex; flex-direction: column; gap: 0.5rem; }
+.remote-auth-label { display: block; margin: 0; font-size: 0.875rem; color: var(--color-text-muted); font-weight: 500; }
+.remote-auth-description {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
 </style>

frontend/src/components/QRCodeDisplay.vue

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

frontend/src/components/RegistrationLinkModal.vue

@@ -1,147 +1,166 @@
 <template>
-  <div v-if="!inline && url" class="dialog-overlay" @keydown.esc.prevent="$emit('close')">
+  <dialog ref="dialog" @close="$emit('close')" @keydown="handleDialogKeydown">
     <div class="device-dialog" role="dialog" aria-modal="true" aria-labelledby="regTitle">
       <div class="reg-header-row">
         <h2 id="regTitle" class="reg-title">
-          📱 <span v-if="userName">Registration for {{ userName }}</span><span v-else>Device Registration Link</span>
+          📱 <span v-if="userName">Registration for {{ userName }}</span><span v-else>Add Another Device</span>
         </h2>
-        <button class="icon-btn" @click="$emit('close')" aria-label="Close">❌</button>
+        <button class="icon-btn" @click="$emit('close')" aria-label="Close" tabindex="-1">✕</button>
       </div>
+
       <div class="device-link-section">
-        <div class="qr-container">
+        <p class="reg-help">
-          <a :href="url" @click.prevent="copy" class="qr-link">
+          Scan this QR code on the new device, or copy the link and open it there.
-            <canvas ref="qrCanvas" class="qr-code"></canvas>
+        </p>
-            <p>{{ displayUrl }}</p>
+
-          </a>
+        <QRCodeDisplay
-          <p class="reg-help">
+          :url="linkUrl"
-            <span v-if="userName">The user should open this link on the device where they want to register.</span>
+          :show-link="true"
-            <span v-else>Open or scan this link on the device you wish to register to your account.</span>
+          @copied="onCopied"
-            <br><small>{{ expirationMessage }}</small>
+          @keydown="handleQRKeydown"
-          </p>
+        />
-        </div>
+
+        <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>
-        <button class="btn-primary" @click="copy">Copy Link</button>
       </div>
     </div>
-  </div>
+  </dialog>
-  <div v-else-if="inline && url" class="registration-inline-wrapper">
-    <div class="registration-inline-block section-block">
-      <div class="section-header">
-        <h2 class="inline-heading">📱 <span v-if="userName">Registration for {{ userName }}</span><span v-else>Device Registration Link</span></h2>
-      </div>
-      <div class="section-body">
-        <div class="device-link-section">
-          <div class="qr-container">
-            <a :href="url" @click.prevent="copy" class="qr-link">
-              <canvas ref="qrCanvas" class="qr-code"></canvas>
-              <p>{{ displayUrl }}</p>
-            </a>
-            <p class="reg-help">
-              <span v-if="userName">The user should open this link on the device where they want to register.</span>
-              <span v-else>Open this link on the device you wish to connect with.</span>
-              <br><small>{{ expirationMessage }}</small>
-            </p>
-          </div>
-        </div>
-        <div class="button-row" style="margin-top:1rem;">
-          <button class="btn-primary" @click="copy">Copy Link</button>
-          <button v-if="showCloseInInline" class="btn-secondary" @click="$emit('close')">Close</button>
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch, computed, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
-import QRCode from 'qrcode/lib/browser'
+import QRCodeDisplay from '@/components/QRCodeDisplay.vue'
+import { apiJson } from '@/utils/api'
 import { formatDate } from '@/utils/helpers'
-import { useAuthStore } from '@/stores/auth'
+import { getDirection } from '@/utils/keynav'
-import { apiJson, getUserFriendlyErrorMessage, shouldShowErrorToast } from '@/utils/api'
-
-const authStore = useAuthStore()
 
 const props = defineProps({
   endpoint: { type: String, required: true },
-  autoCopy: { type: Boolean, default: true },
+  userName: { type: String, default: '' }
-  userName: { type: String, default: null },
-  inline: { type: Boolean, default: false },
-  showCloseInInline: { type: Boolean, default: false },
-  prefixCopyWithUserName: { type: Boolean, default: false }
 })
 
-const emit = defineEmits(['close','generated','copied'])
+const emit = defineEmits(['close', 'copied'])
 
-const url = ref(null)
+const dialog = ref(null)
-const expires = ref(null)
+const linkUrl = ref(null)
-const qrCanvas = ref(null)
+const expiresAt = ref(null)
+const actionsRow = ref(null)
+// Store the element that had focus before modal opened
+const previouslyFocusedElement = ref(null)
 
-const displayUrl = computed(() => url.value ? url.value.replace(/^[^:]+:\/\//,'') : '')
+async function generateLink() {
-
-const expirationMessage = computed(() => {
-  const timeStr = formatDate(expires.value)
-  return `⚠️ Expires ${timeStr.startsWith('In ') ? timeStr.substring(3) : timeStr} and can only be used once.`
-})
-
-async function fetchLink() {
   try {
     const data = await apiJson(props.endpoint, { method: 'POST' })
-    url.value = data.url
+    if (data.url) {
-    expires.value = data.expires
+      linkUrl.value = data.url
-    emit('generated', { url: data.url, expires: data.expires })
+      expiresAt.value = data.expires ? new Date(data.expires) : null
-    await nextTick()
+
-    drawQR()
+      // Show the dialog as modal
-    if (props.autoCopy) copy()
+      await nextTick()
-  } catch (e) {
+      if (dialog.value) {
-    console.error('Failed to create link', e)
+        dialog.value.showModal()
-    if (shouldShowErrorToast(e)) {
+
-      authStore.showMessage(getUserFriendlyErrorMessage(e), 'error', 4000)
+        // Focus primary button (or first button if no primary) after content renders
+        const actions = actionsRow.value
+        const target = actions?.querySelector('.btn-primary') || actions?.querySelector('button')
+        target?.focus()
+      }
+    } else {
+      emit('close')
     }
-    // Close the dialog on any error (auth cancelled, network error, etc.)
+  } catch {
     emit('close')
   }
 }
 
-async function drawQR() {
+function onCopied() {
-  if (!url.value) return
+  emit('copied')
-  await nextTick()
-  if (!qrCanvas.value) return
-  QRCode.toCanvas(qrCanvas.value, url.value, { scale: 8 }, err => { if (err) console.error(err) })
 }
 
-async function copy() {
+const handleDialogKeydown = (event) => {
-  if (!url.value) return
+  // ESC is handled automatically by <dialog>
-  let text = url.value
+  // Handle other key navigation
-  if (props.prefixCopyWithUserName && props.userName) {
+  const direction = getDirection(event)
-    text = `${props.userName} ${text}`
+  if (!direction) return
-  }
+
-  try {
+  if (direction === 'down' || direction === 'up') {
-    await navigator.clipboard.writeText(text)
+    // Let the individual handlers manage navigation
-    emit('copied', text)
+    return
-    if (!props.inline) emit('close')
-  } catch (_) {
-    /* ignore */
   }
 }
 
-onMounted(fetchLink)
+const handleQRKeydown = (event) => {
-watch(url, () => drawQR(), { flush: 'post' })
+  const direction = getDirection(event)
+  if (!direction) return
 
+  event.preventDefault()
+
+  // Navigation constrained within modal: QR link <-> Close button
+  if (direction === 'down' || direction === 'up') {
+    // Toggle between QR link and close button
+    actionsRow.value?.querySelector('button')?.focus()
+  }
+  // Left/right do nothing on QR code
+}
+
+const handleActionsKeydown = (event) => {
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  // Navigation constrained within modal: Close button <-> QR link
+  if (direction === 'up' || direction === 'down') {
+    // Toggle between close button and QR link
+    document.querySelector('.qr-link')?.focus()
+  }
+  // Left/right do nothing (only one button)
+}
+
+onMounted(() => {
+  // Save currently focused element before modal takes focus
+  previouslyFocusedElement.value = document.activeElement
+  generateLink()
+})
+
+onUnmounted(() => {
+  // Restore focus when modal closes
+  const prev = previouslyFocusedElement.value
+  if (prev && document.body.contains(prev) && !prev.disabled) {
+    prev.focus()
+  }
+})
 </script>
+
 <style scoped>
-.icon-btn { background:none; border:none; cursor:pointer; font-size:1rem; opacity:.6; }
+dialog {
-.icon-btn:hover { opacity:1; }
+  border: none;
-/* Minimal extra styling; main look comes from global styles */
+  background: transparent;
-.qr-link { text-decoration:none; color:inherit; }
+  padding: 0;
-.reg-header-row { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.75rem; }
+  max-width: none;
-.reg-title { margin:0; font-size:1.25rem; font-weight:600; }
+  width: fit-content;
-.device-dialog { background: var(--color-surface); padding: 1.25rem 1.25rem 1rem; border-radius: var(--radius-md); max-width:480px; width:100%; box-shadow:0 6px 28px rgba(0,0,0,.25); }
+  height: fit-content;
-.qr-container { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
+  position: fixed;
-.qr-code { display:block; }
+  inset: 0;
-.reg-help { margin-top:.5rem; margin-bottom:.75rem; font-size:.85rem; line-height:1.25rem; text-align:center; }
+  margin: auto;
-.reg-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.25rem; }
+}
-.registration-inline-block .qr-container { align-items:flex-start; }
+
-.registration-inline-block .reg-help { text-align:left; }
+dialog::backdrop {
+  -webkit-backdrop-filter: blur(.2rem) brightness(0.5);
+  backdrop-filter: blur(.2rem) brightness(0.5);
+}
+
+.icon-btn { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: .6; }
+.icon-btn:hover { opacity: 1; }
+.reg-header-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
+.reg-title { margin: 0; font-size: 1.25rem; font-weight: 600; }
+.device-dialog { background: var(--color-surface); padding: 1.25rem 1.25rem 1rem; border-radius: var(--radius-md); max-width: 480px; width: 100%; box-shadow: 0 6px 28px rgba(0,0,0,.25); }
+.reg-help { margin: .5rem 0 .75rem; font-size: .85rem; line-height: 1.4; text-align: center; color: var(--color-text-muted); }
+.reg-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
+.expiry-note { font-size: .75rem; color: var(--color-text-muted); text-align: center; margin-top: .75rem; }
 </style>

frontend/src/components/RemoteAuthPermit.vue

@@ -0,0 +1,953 @@
+<template>
+  <div class="pairing-entry">
+    <form @submit.prevent="submitCode" class="pairing-form">
+      <!-- Code input (shown when device info not yet received) -->
+      <div v-if="!deviceInfo" class="input-row">
+        <div class="input-wrapper" :class="{ 'has-error': serverError, 'is-complete': deviceInfo && !serverError, 'focused': isFocused, 'has-selection': hasSelection }">
+          <!-- Visual slot-machine display overlay -->
+          <div class="slot-machine" :class="{ 'has-error': serverError, 'is-complete': deviceInfo && !serverError }" aria-hidden="true">
+            <div v-for="(word, index) in displayWords" :key="index" class="slot-reel" :class="{ 'invalid-word': word.invalid, 'empty': !word.text && !word.typedPrefix }">
+              <div class="slot-word">
+                <span v-if="word.selectionStartChar >= 0 && word.selectionEndChar > word.selectionStartChar"
+                      class="selection-overlay"
+                      :style="{ '--sel-start': word.selectionStartChar, '--sel-end': word.selectionEndChar, '--word-len': word.wordLen }"></span>
+                <template v-if="word.typedPrefix">
+                  <span class="typed-prefix">{{ word.typedPrefix }}</span><span class="hint-suffix">{{ word.hintSuffix }}</span>
+                  <span v-if="word.hasCursor" class="cursor-overlay" :style="{ '--cursor-pos': word.cursorCharIndex, '--word-len': word.wordLen }"></span>
+                </template>
+                <template v-else-if="word.text">
+                  {{ word.text }}
+                  <span v-if="word.hasCursor" class="cursor-overlay" :style="{ '--cursor-pos': word.cursorCharIndex, '--word-len': word.wordLen }"></span>
+                </template>
+                <template v-else>
+                  <span v-if="word.hasCursor" class="cursor-overlay" :style="{ '--cursor-pos': 0, '--word-len': 0 }"></span>
+                </template>
+              </div>
+            </div>
+          </div>
+          <!-- Hidden input for actual text entry -->
+          <input
+            ref="inputRef"
+            v-model="code"
+            type="text"
+            :placeholder="placeholder"
+            autocomplete="off"
+            autocapitalize="none"
+            autocorrect="off"
+            spellcheck="false"
+            class="pairing-input hidden-input"
+            @input="handleInput"
+            @keydown="deferUpdateCursor"
+            @mouseup="updateCursorPos"
+            @focus="isFocused = true"
+            @blur="isFocused = false"
+          />
+        </div>
+        <!-- Processing status beside input -->
+        <div v-if="processingStatus" class="processing-status">
+          <span class="processing-icon">{{ processingStatus === 'pow' ? '🔐' : '📡' }}</span>
+          <span class="processing-spinner-small"></span>
+        </div>
+      </div>
+
+      <!-- Device info display (shown when 3 words match a request) -->
+      <div v-else-if="deviceInfo" class="device-info">
+        <p class="device-permit-text">Permit {{ deviceInfo.action === 'register' ? 'registration' : 'login' }} to <strong>{{ deviceInfo.host }}</strong></p>
+        <p class="device-meta">{{ deviceInfo.user_agent_pretty }}</p>
+
+        <p v-if="error" class="error-message" style="margin-top: 0.5rem;">{{ error }}</p>
+
+        <div class="button-row" style="margin-top: 0.75rem; display: flex; gap: 0.5rem;">
+          <button
+            type="button"
+            class="btn-secondary"
+            :disabled="loading"
+            @click="deny"
+            style="flex: 1;"
+          >
+            Deny
+          </button>
+          <button
+            ref="submitBtnRef"
+            type="submit"
+            :disabled="loading"
+            class="btn-primary"
+            style="flex: 1;"
+          >
+            {{ loading ? 'Authenticating…' : 'Authorize' }}
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { startAuthentication } from '@simplewebauthn/browser'
+import aWebSocket from '@/utils/awaitable-websocket'
+import { b64dec, b64enc } from '@/utils/base64url'
+import { getSettings } from '@/utils/settings'
+import { getUniqueMatch, isValidWord, isValidPrefix } from '@/utils/wordlist'
+import { solvePoW } from '@/utils/pow'
+import { useAuthStore } from '@/stores/auth'
+
+const props = defineProps({
+  title: { type: String, default: 'Help Another Device Sign In' },
+  description: { type: String, default: 'Enter the code shown on the device that needs to sign in.' },
+  placeholder: { type: String, default: 'Enter three words' },
+  action: { type: String, default: 'login' }, // 'login' or 'register'
+})
+
+const emit = defineEmits(['completed', 'error', 'cancelled', 'back', 'register', 'deviceInfoVisible'])
+
+// State
+const loading = ref(false)
+const error = ref(null)
+const settings = ref(null)
+let ws = null
+let authStore = null
+
+// Try to get authStore (might fail if Pinia not installed in this app instance)
+try { authStore = useAuthStore() } catch (e) { /* ignore */ }
+
+const inputRef = ref(null)
+const submitBtnRef = ref(null)
+const code = ref('')
+const isProcessing = ref(false)
+const processingStatus = ref('')
+const deviceInfo = ref(null)
+const autocompleteHint = ref('')
+
+// Watch deviceInfo and emit visibility change
+watch(deviceInfo, (newVal) => {
+  emit('deviceInfoVisible', !!newVal)
+})
+
+const hasInvalidWord = ref(false)
+const serverError = ref(false)
+const cursorPos = ref(0)
+const selectionStart = ref(0)
+const selectionEnd = ref(0)
+const isFocused = ref(false)
+const isDeleting = ref(false)
+let previousCursorPos = 0
+let wsConnecting = false
+let currentChallenge = null
+let currentWork = null
+let powPromise = null
+let powSolution = null
+let lookupTimeout = null
+let lastLookedUpCode = null
+
+// --- Helpers ---
+
+function showMessage(message, type = 'info', duration = 3000) {
+  if (authStore) {
+    authStore.showMessage(message, type, duration)
+  }
+}
+
+async function fetchSettings() {
+  try {
+    const data = await getSettings()
+    settings.value = data
+  } catch (err) {
+    console.warn('Unable to load settings', err)
+  }
+}
+
+// --- Input Mode Logic ---
+
+function getWordAtCursor(input, cursor) {
+  if (!input || cursor < 0) return { word: '', start: 0, end: 0 }
+  let start = cursor, end = cursor
+  while (start > 0 && /[a-zA-Z]/.test(input[start - 1])) start--
+  while (end < input.length && /[a-zA-Z]/.test(input[end])) end++
+  return { word: input.slice(start, end), start, end }
+}
+
+function getWords(input) {
+  return input.trim().split(/[.\s]+/).filter(w => w.length > 0)
+}
+
+// Get words for display, splitting concatenated valid words (e.g., "alienfood" -> ["alien", "food"])
+function getDisplayWords(input) {
+  const rawWords = getWords(input)
+  const result = []
+
+  for (const rawWord of rawWords) {
+    // Try to split this raw word into valid words
+    let remaining = rawWord.toLowerCase()
+    while (remaining.length > 0 && result.length < 3) {
+      let foundWord = null
+      // Try to find the longest valid word from the start
+      for (let len = Math.min(remaining.length, 6); len >= 3; len--) {
+        const candidate = remaining.slice(0, len)
+        if (isValidWord(candidate)) {
+          foundWord = candidate
+          break
+        }
+      }
+      if (foundWord) {
+        result.push(foundWord)
+        remaining = remaining.slice(foundWord.length)
+      } else {
+        // No valid word found, keep the remaining as partial word
+        result.push(remaining)
+        break
+      }
+    }
+    if (result.length >= 3) break
+  }
+
+  return result
+}
+
+function countCompleteWords(input) {
+  const endsWithSeparator = /[.\s]$/.test(input)
+  const words = getDisplayWords(input)
+  return endsWithSeparator ? words.length : Math.max(0, words.length - 1)
+}
+
+function analyzeWords(input) {
+  if (!input) return { valid: true, segments: [] }
+  const segments = []
+  const endsWithSeparator = /[.\s]$/.test(input)
+  let match, regex = /([a-zA-Z]+)|([.\s]+)/g
+  while ((match = regex.exec(input)) !== null) {
+    if (match[1]) segments.push({ text: match[1], isWord: true, start: match.index })
+    else if (match[2]) segments.push({ text: match[2], isWord: false, start: match.index })
+  }
+  const words = segments.filter(s => s.isWord)
+  let allValid = true
+  words.forEach((wordSeg, idx) => {
+    const isLastWord = idx === words.length - 1
+    const word = wordSeg.text.toLowerCase()
+    if (isLastWord && !endsWithSeparator) wordSeg.invalid = !isValidPrefix(word)
+    else wordSeg.invalid = !isValidWord(word)
+    if (wordSeg.invalid) allValid = false
+  })
+  return { valid: allValid, segments }
+}
+
+const coloredSegments = computed(() => {
+  const { segments } = analyzeWords(code.value)
+  return segments.map(s => ({ text: s.text, invalid: s.invalid || false }))
+})
+
+function checkWordsValidity(input) { return analyzeWords(input).valid }
+function allWordsValid(input) { return getDisplayWords(input).length > 0 && getDisplayWords(input).every(w => isValidWord(w)) }
+
+// Get the current partial word being typed (not yet a complete word)
+function getCurrentPartialWord(input) {
+  const endsWithSeparator = /[.\s]$/.test(input)
+  if (endsWithSeparator) return ''
+  const match = input.match(/[a-zA-Z]+$/)
+  return match ? match[0].toLowerCase() : ''
+}
+
+// Calculate cursor position in the normalized display (wordIndex, charIndex within word)
+// Returns { wordIndex: number, charIndex: number } where charIndex is position within the word text
+// This handles concatenated words like "alienfood" being displayed as "alien" + "food"
+function calcDisplayCursor(input, rawCursorPos) {
+  if (!input || rawCursorPos === 0) {
+    return { wordIndex: 0, charIndex: 0 }
+  }
+
+  const beforeCursor = input.slice(0, rawCursorPos)
+  const endsWithSeparator = /[.\s]$/.test(beforeCursor)
+
+  // Get display words for the text before cursor
+  const displayWordsBefore = getDisplayWords(beforeCursor)
+
+  if (displayWordsBefore.length === 0) {
+    return { wordIndex: 0, charIndex: 0 }
+  }
+
+  if (endsWithSeparator) {
+    // Cursor is in whitespace after words, so it's at start of next word
+    return { wordIndex: Math.min(displayWordsBefore.length, 2), charIndex: 0 }
+  }
+
+  // Cursor is within/after the last display word
+  const lastDisplayWord = displayWordsBefore[displayWordsBefore.length - 1]
+  const wordIndex = displayWordsBefore.length - 1
+
+  // Find where in the original input this display word ends
+  // by getting the full display words and comparing
+  const fullDisplayWords = getDisplayWords(input)
+
+  // Calculate char position within the word
+  // The last display word from beforeCursor might be partial
+  const charIndex = lastDisplayWord.length
+
+  // If this word is a complete valid word and it's not the 3rd word (index 2),
+  // show cursor at start of next slot - but only when typing forward, not when deleting
+  if (wordIndex < 2 && !isDeleting.value) {
+    if (isValidWord(lastDisplayWord)) {
+      return { wordIndex: wordIndex + 1, charIndex: 0 }
+    }
+  }
+
+  return { wordIndex: Math.min(wordIndex, 2), charIndex: charIndex }
+}
+
+// Calculate display cursor without the "advance to next word" logic (for selection bounds)
+function calcDisplayCursorRaw(input, rawCursorPos) {
+  if (!input || rawCursorPos === 0) {
+    return { wordIndex: 0, charIndex: 0 }
+  }
+
+  const beforeCursor = input.slice(0, rawCursorPos)
+  const endsWithSeparator = /[.\s]$/.test(beforeCursor)
+  const displayWordsBefore = getDisplayWords(beforeCursor)
+
+  if (displayWordsBefore.length === 0) {
+    return { wordIndex: 0, charIndex: 0 }
+  }
+
+  if (endsWithSeparator) {
+    return { wordIndex: Math.min(displayWordsBefore.length, 2), charIndex: 0 }
+  }
+
+  const lastDisplayWord = displayWordsBefore[displayWordsBefore.length - 1]
+  const wordIndex = displayWordsBefore.length - 1
+  return { wordIndex: Math.min(wordIndex, 2), charIndex: lastDisplayWord.length }
+}
+
+// Compute display words for slot-machine overlay (always 3 slots)
+const displayWords = computed(() => {
+  const words = getDisplayWords(code.value)
+  const result = []
+
+  // Get current partial word and autocomplete hint
+  const partialWord = getCurrentPartialWord(code.value)
+  const hint = autocompleteHint.value
+  const endsWithSeparator = /[.\s]$/.test(code.value)
+
+  // Calculate selection bounds (raw positions without advance logic)
+  const hasSelectionNow = selectionStart.value !== selectionEnd.value
+  const selStart = calcDisplayCursorRaw(code.value, Math.min(selectionStart.value, selectionEnd.value))
+  const selEnd = calcDisplayCursorRaw(code.value, Math.max(selectionStart.value, selectionEnd.value))
+
+  // Calculate where cursor should be displayed
+  // Use raw position when there's a selection (cursor shows at active end without advance)
+  // Use advance logic only when typing without selection
+  const cursor = hasSelectionNow
+    ? calcDisplayCursorRaw(code.value, cursorPos.value)
+    : calcDisplayCursor(code.value, cursorPos.value)
+
+  // Always show exactly 3 slots
+  for (let i = 0; i < 3; i++) {
+    const isCursorSlot = cursor.wordIndex === i
+
+    // Calculate selection range for this word
+    let selectionStartChar = -1
+    let selectionEndChar = -1
+    if (hasSelectionNow) {
+      if (i > selStart.wordIndex && i < selEnd.wordIndex) {
+        // Entire word is selected
+        selectionStartChar = 0
+        selectionEndChar = words[i]?.length ?? 0
+      } else if (i === selStart.wordIndex && i === selEnd.wordIndex) {
+        // Selection starts and ends in this word
+        selectionStartChar = selStart.charIndex
+        selectionEndChar = selEnd.charIndex
+      } else if (i === selStart.wordIndex) {
+        // Selection starts in this word
+        selectionStartChar = selStart.charIndex
+        selectionEndChar = words[i]?.length ?? 0
+      } else if (i === selEnd.wordIndex) {
+        // Selection ends in this word
+        selectionStartChar = 0
+        selectionEndChar = selEnd.charIndex
+      }
+    }
+
+    if (i < words.length) {
+      const word = words[i].toLowerCase()
+      const isLastWord = i === words.length - 1
+      // Validate: last word without separator can be a prefix, others must be complete words
+      const isInvalid = (isLastWord && !endsWithSeparator) ? !isValidPrefix(word) : !isValidWord(word)
+
+      if (isLastWord && !endsWithSeparator && hint && partialWord) {
+        // Show typed prefix + hint suffix in the same slot
+        // Total visible length is the full hint word
+        const totalLen = hint.length
+        result.push({
+          text: '',
+          typedPrefix: partialWord,
+          hintSuffix: hint.slice(partialWord.length),
+          invalid: isInvalid,
+          hasCursor: isCursorSlot,
+          cursorCharIndex: isCursorSlot ? cursor.charIndex : -1,
+          wordLen: totalLen,
+          selectionStartChar,
+          selectionEndChar
+        })
+      } else {
+        // Complete word - show cursor at appropriate position
+        result.push({
+          text: word,
+          invalid: isInvalid,
+          hasCursor: isCursorSlot,
+          cursorCharIndex: isCursorSlot ? cursor.charIndex : -1,
+          wordLen: word.length,
+          selectionStartChar,
+          selectionEndChar
+        })
+      }
+    } else {
+      // Empty slot
+      result.push({
+        text: '',
+        invalid: false,
+        hasCursor: isCursorSlot,
+        cursorCharIndex: 0,
+        wordLen: 0,
+        selectionStartChar,
+        selectionEndChar
+      })
+    }
+  }
+
+  return result
+})
+
+const hasSelection = computed(() => selectionStart.value !== selectionEnd.value)
+
+const hasThreeValidWords = computed(() => {
+  const words = getDisplayWords(code.value)
+  return words.length === 3 && words.every(w => isValidWord(w))
+})
+
+function normalizeCode(input) {
+  // Use display words to handle concatenated words like "alienfood" -> "alien.food"
+  const words = getDisplayWords(input)
+  return words.join('.')
+}
+
+function startPowSolving() {
+  if (!currentChallenge || powPromise) return
+  const challenge = b64dec(currentChallenge)
+  powPromise = solvePoW(challenge, currentWork).then(solution => {
+    powSolution = solution
+    powPromise = null
+  })
+}
+
+async function getPowSolution() {
+  if (powSolution) { const s = powSolution; powSolution = null; return s }
+  if (powPromise) { await powPromise; const s = powSolution; powSolution = null; return s }
+  if (!currentChallenge) throw new Error('No PoW challenge available')
+  const challenge = b64dec(currentChallenge)
+  return await solvePoW(challenge, currentWork)
+}
+
+function updateChallenge(pow) {
+  if (pow?.challenge) {
+    currentChallenge = pow.challenge
+    currentWork = pow.work
+    powSolution = null
+    powPromise = null
+    startPowSolving()
+  }
+}
+
+async function ensureConnection() {
+  if (ws || wsConnecting) return
+  wsConnecting = true
+  try {
+    const authHost = settings.value?.auth_host
+    const wsPath = '/auth/ws/remote-auth/permit'
+    const wsUrl = authHost && location.host !== authHost ? `//${authHost}${wsPath}` : wsPath
+    ws = await aWebSocket(wsUrl)
+    const msg = await ws.receive_json()
+    if (msg.status && msg.detail) throw new Error(msg.detail)
+    if (!msg.pow?.challenge) throw new Error('Server did not send PoW challenge')
+    updateChallenge(msg.pow)
+  } catch (err) {
+    console.error('WebSocket connection error:', err)
+    ws = null
+    throw err
+  } finally {
+    wsConnecting = false
+  }
+}
+
+// Defer cursor position update to after browser processes the key
+function deferUpdateCursor(event) {
+  // Handle Tab/Space for autocomplete immediately
+  if (event.key === 'Tab' || event.key === ' ' || event.key === 'Escape') {
+    handleKeydown(event)
+    return
+  }
+  // Defer cursor update to next tick
+  setTimeout(updateCursorPos, 0)
+}
+
+function updateCursorPos() {
+  const input = inputRef.value
+  const start = input?.selectionStart ?? code.value.length
+  const end = input?.selectionEnd ?? start
+
+  // Track direction based on which end moved
+  // If selection exists, cursor is at the end being moved (selectionDirection)
+  const direction = input?.selectionDirection ?? 'none'
+  const activeCursor = direction === 'backward' ? start : end
+
+  isDeleting.value = activeCursor < previousCursorPos
+  previousCursorPos = activeCursor
+  cursorPos.value = activeCursor
+  selectionEnd.value = end
+  // Store start separately - cursorPos is the active end, we need both for selection
+  selectionStart.value = start
+}
+
+function updateAutocomplete() {
+  cursorPos.value = inputRef.value?.selectionStart ?? code.value.length
+  const { word, end } = getWordAtCursor(code.value, cursorPos.value)
+  const completeWordCount = countCompleteWords(code.value)
+  if (completeWordCount >= 3 || !word || word.length < 1 || cursorPos.value !== end) {
+    autocompleteHint.value = ''
+    return
+  }
+  const match = getUniqueMatch(word.toLowerCase())
+  if (match && match !== word.toLowerCase()) autocompleteHint.value = match
+  else autocompleteHint.value = ''
+}
+
+function applyAutocomplete() {
+  if (!autocompleteHint.value) return false
+  const { word, start, end } = getWordAtCursor(code.value, cursorPos.value)
+  if (!word) return false
+  const before = code.value.slice(0, start)
+  const wordsBefore = getDisplayWords(before).length
+  const isThirdWord = wordsBefore === 2
+  const suffix = isThirdWord ? '' : ' '
+  const after = code.value.slice(end)
+  code.value = before + autocompleteHint.value + suffix + after.trimStart()
+  const newPos = start + autocompleteHint.value.length + suffix.length
+  nextTick(() => {
+    inputRef.value?.setSelectionRange(newPos, newPos)
+    cursorPos.value = newPos
+  })
+  autocompleteHint.value = ''
+  return true
+}
+
+function handleInput() {
+  cursorPos.value = inputRef.value?.selectionStart ?? code.value.length
+
+  // Mobile fallback for autocomplete: if cursor is right after "prefix " (partial word + space),
+  // replace the partial with the completed word. On desktop, keydown intercepts space before input,
+  // but mobile soft keyboards often insert the space before we can catch it.
+  const cursor = cursorPos.value
+  const beforeCursor = code.value.slice(0, cursor)
+  // Check if cursor is right after a space that follows a word
+  const spaceMatch = beforeCursor.match(/([a-zA-Z]+) $/)
+  if (spaceMatch) {
+    const partialWord = spaceMatch[1].toLowerCase()
+    const match = getUniqueMatch(partialWord)
+    // Only autocomplete if it's not already a complete word and we have a unique match
+    if (match && match !== partialWord && !isValidWord(partialWord)) {
+      const wordStartPos = cursor - spaceMatch[0].length
+      const beforeWord = code.value.slice(0, wordStartPos)
+      const afterSpace = code.value.slice(cursor)
+      const wordsBefore = getDisplayWords(beforeWord).length
+      const isThirdWord = wordsBefore === 2
+      const suffix = isThirdWord ? '' : ' '
+      code.value = beforeWord + match + suffix + afterSpace
+      const newPos = wordStartPos + match.length + suffix.length
+      nextTick(() => {
+        inputRef.value?.setSelectionRange(newPos, newPos)
+        cursorPos.value = newPos
+      })
+    }
+  }
+
+  updateAutocomplete()
+  if (lookupTimeout) { clearTimeout(lookupTimeout); lookupTimeout = null }
+  deviceInfo.value = null
+  error.value = null
+  serverError.value = false
+  hasInvalidWord.value = !checkWordsValidity(code.value)
+  const currentWords = getDisplayWords(code.value)
+  if (currentWords.length >= 1 && !ws && !wsConnecting) ensureConnection()
+  if (currentWords.length === 3) {
+    if (!allWordsValid(code.value)) return
+    lookupTimeout = setTimeout(() => { lookupDeviceInfo() }, 150)
+  }
+}
+
+async function lookupDeviceInfo() {
+  if (isProcessing.value || loading.value) return
+  if (!hasThreeValidWords.value) return
+  const normalizedCode = normalizeCode(code.value)
+  if (normalizedCode === lastLookedUpCode && deviceInfo.value) return
+
+  isProcessing.value = true
+  processingStatus.value = 'pow'
+  error.value = null
+  serverError.value = false
+
+  try {
+    await ensureConnection()
+    if (!ws) throw new Error('Failed to connect')
+    const solution = await getPowSolution()
+    const powB64 = b64enc(solution)
+    const currentCode = normalizeCode(code.value)
+    if (!hasThreeValidWords.value) return
+    processingStatus.value = 'server'
+    ws.send_json({ code: currentCode, pow: powB64 })
+    const res = await ws.receive_json()
+    updateChallenge(res.pow)
+    if (typeof res.status === 'number' && res.status >= 400) {
+      showMessage(res.detail || 'Request failed', 'error')
+      serverError.value = true
+      deviceInfo.value = null
+      lastLookedUpCode = null
+      return
+    }
+    if (res.status === 'found' && res.host) {
+      deviceInfo.value = {
+        host: res.host,
+        user_agent_pretty: res.user_agent_pretty,
+        client_ip: res.client_ip,
+        action: res.action || 'login'
+      }
+      lastLookedUpCode = currentCode
+      nextTick(() => { submitBtnRef.value?.focus() })
+    } else {
+      showMessage('Unexpected response from server', 'error')
+      serverError.value = true
+      deviceInfo.value = null
+      lastLookedUpCode = null
+    }
+  } catch (err) {
+    console.error('Lookup error:', err)
+    showMessage(err.message || 'Lookup failed', 'error')
+    serverError.value = true
+    deviceInfo.value = null
+    lastLookedUpCode = null
+    if (ws) { ws.close(); ws = null }
+  } finally {
+    isProcessing.value = false
+    processingStatus.value = ''
+  }
+}
+
+function handleKeydown(event) {
+  if (event.key === 'Escape') {
+    code.value = ''
+    handleInput()
+    event.preventDefault()
+    return
+  }
+  if (event.key === 'Tab') {
+    if (autocompleteHint.value) {
+      const applied = applyAutocomplete()
+      if (applied) { event.preventDefault(); handleInput(); return }
+    }
+    if (code.value.trim()) event.preventDefault()
+    return
+  }
+  if (event.key === ' ' && autocompleteHint.value) {
+    const applied = applyAutocomplete()
+    if (applied) { event.preventDefault(); handleInput() }
+  }
+}
+
+async function submitCode() {
+  if (!deviceInfo.value || loading.value) return
+  loading.value = true
+  error.value = null
+  try {
+    if (!ws) await ensureConnection()
+    if (!ws) throw new Error('Failed to connect')
+    const solution = await getPowSolution()
+    const powB64 = b64enc(solution)
+    ws.send_json({ authenticate: true, pow: powB64 })
+    const res = await ws.receive_json()
+    if (typeof res.status === 'number' && res.status >= 400) throw new Error(res.detail || 'Authentication failed')
+    if (!res.optionsJSON) throw new Error(res.detail || 'Failed to get authentication options')
+    const authResponse = await startAuthentication(res)
+    ws.send_json(authResponse)
+    const result = await ws.receive_json()
+    if (typeof result.status === 'number' && result.status >= 400) throw new Error(result.detail || 'Authentication failed')
+    if (result.status === 'success') {
+      showMessage('Device authenticated successfully!', 'success', 3000)
+      emit('completed')
+      reset()
+    } else {
+      throw new Error(result.detail || 'Authentication failed')
+    }
+  } catch (err) {
+    console.error('Pairing error:', err)
+    const message = err.name === 'NotAllowedError'
+      ? 'Passkey authentication was cancelled'
+      : (err.message || 'Authentication failed')
+    error.value = message
+    // Don't show toast - error is shown in dialog
+    emit('error', message)
+  } finally {
+    loading.value = false
+    if (ws) { ws.close(); ws = null }
+  }
+}
+
+async function deny() {
+  // Send deny message to server before closing websocket
+  if (ws) {
+    try {
+      ws.send_json({ deny: true })
+      // Give the server a moment to process the denial
+      await new Promise(resolve => setTimeout(resolve, 100))
+    } catch (e) {
+      console.error('Error sending deny message:', e)
+    }
+    ws.close()
+    ws = null
+  }
+
+  // Reset to initial state
+  reset()
+}
+
+function reset() {
+  code.value = ''
+  error.value = null
+  serverError.value = false
+  deviceInfo.value = null
+  isProcessing.value = false
+  processingStatus.value = ''
+  autocompleteHint.value = ''
+  hasInvalidWord.value = false
+  lastLookedUpCode = null
+  if (ws) { ws.close(); ws = null }
+  currentChallenge = null
+  currentWork = null
+  powPromise = null
+  powSolution = null
+}
+
+// --- Lifecycle ---
+
+onMounted(async () => {
+  await fetchSettings()
+  // Initialize cursor position
+  nextTick(() => {
+    cursorPos.value = inputRef.value?.selectionStart ?? 0
+  })
+})
+
+onUnmounted(() => {
+  if (lookupTimeout) { clearTimeout(lookupTimeout); lookupTimeout = null }
+  if (ws) { ws.close(); ws = null }
+})
+
+defineExpose({ reset, deny, code, handleInput, loading, error })
+</script>
+
+<style scoped>
+/* Input Mode Styles */
+.pairing-entry {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.pairing-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  width: 280px;
+  max-width: 100%;
+}
+
+/* Slot machine visual display (matches RemoteAuthRequest) */
+.slot-machine {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  gap: 0;
+  box-sizing: border-box;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.input-wrapper.focused.has-error .slot-machine {
+  background: var(--color-error-bg, rgba(239, 68, 68, 0.05));
+}
+
+.slot-reel {
+  flex: 1 1 33.333%;
+  overflow: visible;
+}
+
+.slot-reel:not(:last-child) {
+  margin-right: 0.5rem;
+}
+
+.slot-word {
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-align: center;
+  width: 100%;
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.slot-word .typed-prefix {
+  color: var(--color-text);
+}
+
+.slot-word .hint-suffix {
+  color: var(--color-text-muted);
+  opacity: 0.6;
+}
+
+.cursor-overlay {
+  position: absolute;
+  width: 2px;
+  height: 1.2em;
+  background: var(--color-text);
+  animation: none;
+  pointer-events: none;
+  /* Position based on character index - calculate from center of slot */
+  left: calc(50% + (var(--cursor-pos) - var(--word-len, 0) / 2) * 0.65em);
+  transform: translateX(-1px);
+  opacity: 0;
+}
+
+.input-wrapper.focused .cursor-overlay {
+  opacity: 1;
+  animation: cursorBlink 250ms alternate infinite;
+}
+
+.input-wrapper.focused.has-selection .cursor-overlay {
+  animation: none;
+}
+
+.selection-overlay {
+  position: absolute;
+  height: 1.2em;
+  background: var(--color-primary, #3b82f6);
+  opacity: 0.3;
+  pointer-events: none;
+  /* Position based on character indices - calculate from center of slot */
+  left: calc(50% + (var(--sel-start) - var(--word-len, 0) / 2) * 0.65em);
+  width: calc((var(--sel-end) - var(--sel-start)) * 0.65em);
+}
+
+@keyframes cursorBlink {
+  0%, 50% { opacity: 1; }
+  80%, 100% { opacity: 0; }
+}
+
+.slot-reel.invalid-word .slot-word {
+  color: var(--color-error, #ef4444);
+}
+
+.slot-reel.invalid-word .slot-word .typed-prefix {
+  color: var(--color-error, #ef4444);
+}
+
+.slot-reel.invalid-word .cursor-overlay {
+  background: var(--color-error, #ef4444);
+}
+
+.slot-reel.empty .slot-word {
+  color: var(--color-text-muted);
+}
+
+/* Hidden input - keeps focus and handles keyboard input */
+.pairing-input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius-sm, 6px);
+  position: relative;
+  z-index: 0;
+}
+
+.pairing-input.hidden-input {
+  opacity: 0;
+}
+
+.pairing-input:disabled {
+  cursor: not-allowed;
+}
+
+.pairing-input::placeholder {
+  color: transparent;
+}
+
+.processing-status {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+.processing-icon {
+  font-size: 0.875rem;
+}
+
+.processing-spinner-small {
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.device-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.device-permit-text {
+  margin: 0;
+  font-size: 0.95rem;
+  color: var(--color-text);
+}
+
+.device-meta {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+}
+
+.error-message {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--color-error, #ef4444);
+  margin-bottom: 1rem;
+}
+</style>

frontend/src/components/RemoteAuthRequest.vue

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

frontend/src/components/RestrictedAuth.vue

@@ -11,27 +11,41 @@
         <header class="view-header center">
           <h1>{{ headingTitle }}</h1>
           <p v-if="isAuthenticated" class="user-line">👤 {{ userDisplayName }}</p>
-          <p class="view-lede">{{ headerMessage }}</p>
+          <p class="view-lede" v-html="headerMessage"></p>
         </header>
 
         <section class="section-block">
           <div class="section-body center">
-            <div class="button-row center">
+            <!-- Local passkey authentication view -->
-              <slot name="actions"
+            <div v-if="authView === 'local'" class="auth-view">
-                :loading="loading"
+              <div class="button-row center" ref="buttonRow">
-                :can-authenticate="canAuthenticate"
+                <slot name="actions"
-                :is-authenticated="isAuthenticated"
+                  :loading="loading"
-                :authenticate="authenticateUser"
+                  :can-authenticate="canAuthenticate"
-                :logout="logoutUser"
+                  :is-authenticated="isAuthenticated"
-                :mode="mode">
+                  :authenticate="authenticateUser"
-                <!-- Default actions -->
+                  :logout="logoutUser"
-                <button class="btn-secondary" :disabled="loading" @click="$emit('back')">Back</button>
+                  :mode="mode">
-                <button v-if="canAuthenticate" class="btn-primary" :disabled="loading" @click="authenticateUser">
+                  <!-- Default actions -->
-                  {{ loading ? (mode === 'reauth' ? 'Verifying…' : 'Signing in…') : (mode === 'reauth' ? 'Verify' : 'Login') }}
+                  <button class="btn-secondary" :disabled="loading" @click="$emit('back')">Back</button>
-                </button>
+                  <button v-if="canAuthenticate" class="btn-primary" :disabled="loading" @click="authenticateUser">
-                <button v-if="isAuthenticated && mode !== 'reauth'" class="btn-danger" :disabled="loading" @click="logoutUser">Logout</button>
+                    {{ loading ? (mode === 'reauth' ? 'Verifying…' : 'Signing in…') : (mode === 'reauth' ? 'Verify' : 'Login') }}
-                <button v-if="isAuthenticated && mode !== 'reauth'" class="btn-primary" :disabled="loading" @click="openProfile">Profile</button>
+                  </button>
-              </slot>
+                  <button v-if="isAuthenticated && mode !== 'reauth'" class="btn-danger" :disabled="loading" @click="logoutUser">Logout</button>
+                  <button v-if="isAuthenticated && mode !== 'reauth'" class="btn-primary" :disabled="loading" @click="openProfile">Profile</button>
+                </slot>
+              </div>
+            </div>
+
+            <!-- Remote authentication view (request new remote auth) -->
+            <div v-else-if="authView === 'remote'" class="auth-view">
+              <RemoteAuthRequest
+                :active="authView === 'remote'"
+                @authenticated="handleRemoteAuthenticated"
+                @register="handleRemoteRegistration"
+                @cancelled="switchToLocal"
+                @error="handleRemoteAuthError"
+              />
             </div>
           </div>
         </section>
@@ -41,10 +55,12 @@
 </template>
 
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import passkey from '@/utils/passkey'
-import { getSettings } from '@/utils/settings'
+import { getSettings, uiBasePath } from '@/utils/settings'
 import { fetchJson, getUserFriendlyErrorMessage } from '@/utils/api'
+import RemoteAuthRequest from '@/components/RemoteAuthRequest.vue'
+import { focusDialogButton } from '@/utils/keynav'
 
 const props = defineProps({
   mode: {
@@ -62,17 +78,16 @@ const loading = ref(false)
 const settings = ref(null)
 const userInfo = ref(null)
 const currentView = ref('initial') // 'initial', 'login', 'forbidden'
+const authView = ref('local') // 'local' or 'remote'
+const buttonRow = ref(null)
 let statusTimer = null
 
 const isAuthenticated = computed(() => !!userInfo.value?.authenticated)
 
 const canAuthenticate = computed(() => {
   if (initializing.value) return false
-  // In reauth mode, allow authentication even if already authenticated
   if (props.mode === 'reauth') return true
-  // In forbidden view (authenticated but lacking permissions), don't allow authentication
   if (currentView.value === 'forbidden') return false
-  // In login view or initial state, allow authentication
   return true
 })
 
@@ -91,6 +106,12 @@ const headerMessage = computed(() => {
   if (currentView.value === 'forbidden') {
     return 'You lack the required permissions.'
   }
+  if (authView.value === 'remote') {
+    return 'Confirm from your other device. Or <a href="#" class="inline-link" data-action="local">this device</a>.'
+  }
+  if (canAuthenticate.value && props.mode !== 'reauth') {
+    return 'Please sign in with your passkey. Or use <a href="#" class="inline-link" data-action="remote">another device</a>.'
+  }
   return 'Please sign in with your passkey.'
 })
 
@@ -122,7 +143,6 @@ async function fetchSettings() {
 async function fetchUserInfo() {
   try {
     userInfo.value = await fetchJson('/auth/api/user-info', { method: 'POST' })
-    // Determine view based on authentication status
     if (isAuthenticated.value && props.mode !== 'reauth') {
       currentView.value = 'forbidden'
       emit('forbidden', userInfo.value)
@@ -131,7 +151,6 @@ async function fetchUserInfo() {
     }
   } catch (error) {
     console.error('Failed to load user info', error)
-    // For 401/403 just go to login, for other errors show message
     if (error.status !== 401 && error.status !== 403) {
       showMessage(getUserFriendlyErrorMessage(error), 'error', 4000)
     }
@@ -170,7 +189,6 @@ async function logoutUser() {
   try {
     await fetchJson('/auth/api/logout', { method: 'POST' })
     userInfo.value = null
-    // Switch to login view after logout
     currentView.value = 'login'
     showMessage('Logged out. You can sign in with a different account.', 'info', 3000)
   } catch (error) {
@@ -181,7 +199,6 @@ async function logoutUser() {
 }
 
 function openProfile() {
-  // Open profile in a new window with a specific name to reuse the same tab
   const profileWindow = window.open('/auth/', 'passkey_auth_profile')
   if (profileWindow) profileWindow.focus()
 }
@@ -196,10 +213,68 @@ async function setSessionCookie(result) {
   })
 }
 
+function switchToRemote() {
+  authView.value = 'remote'
+}
+
+function switchToLocal() {
+  authView.value = 'local'
+}
+
+async function handleRemoteAuthenticated(result) {
+  showMessage('Authenticated from another device!', 'success', 2000)
+  try {
+    await setSessionCookie(result)
+  } catch (error) {
+    const message = error?.message || 'Failed to establish session'
+    showMessage(message, 'error', 4000)
+    emit('auth-error', { message, cancelled: false })
+    return
+  }
+  emit('authenticated', result)
+}
+
+function handleRemoteRegistration(token) {
+  showMessage('Registration approved! Redirecting...', 'success', 2000)
+  const basePath = uiBasePath() || '/auth/'
+  window.location.href = `${basePath}${token}`
+}
+
+function handleRemoteAuthError(errorMsg) {
+  // Error is already shown in the RemoteAuth component, don't show toast
+}
+
+function handleHeaderLinkClick(event) {
+  const target = event.target
+  if (target.tagName === 'A' && target.classList.contains('inline-link')) {
+    event.preventDefault()
+    const action = target.dataset.action
+    if (action === 'remote') {
+      switchToRemote()
+    } else if (action === 'local') {
+      switchToLocal()
+    }
+  }
+}
+
+// Autofocus primary button when the view becomes ready
+watch(initializing, (newVal) => {
+  if (!newVal) {
+    nextTick(() => focusDialogButton(buttonRow.value))
+  }
+})
+
 onMounted(async () => {
   await fetchSettings()
   await fetchUserInfo()
   initializing.value = false
+
+  // Add click handler for inline links
+  document.addEventListener('click', handleHeaderLinkClick)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleHeaderLinkClick)
 })
 
 defineExpose({
@@ -210,9 +285,8 @@ defineExpose({
 </script>
 
 <style scoped>
-.button-row.center { display: flex; justify-content: center; gap: 0.75rem; }
+.button-row.center { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
 .user-line { margin: 0.5rem 0 0; font-weight: 500; color: var(--color-text); }
-/* Vertically center the restricted "dialog" surface in the viewport */
 main.view-root { min-height: 100vh; align-items: center; justify-content: center; padding: 2rem 1rem; }
 .surface.surface--tight {
   max-width: 520px;
@@ -222,4 +296,24 @@ main.view-root { min-height: 100vh; align-items: center; justify-content: center
   flex-direction: column;
   gap: 1.75rem;
 }
+
+.auth-view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+}
+
+.view-lede :deep(.inline-link) {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: opacity 0.15s;
+  font-weight: 400;
+}
+
+.view-lede :deep(.inline-link:hover) {
+  opacity: 0.8;
+  text-decoration: underline;
+}
 </style>

frontend/src/components/SessionList.vue

@@ -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">
+          <div v-for="(group, host) in groupedSessions" :key="host" class="session-group" tabindex="0" @keydown="handleGroupKeydown($event, host)">
-            <h3 :class="['session-group-host', { 'is-current-site': group.isCurrentSite }]">
+            <span :class="['session-group-host', { 'is-current-site': group.isCurrentSite }]">
-              <template v-if="host"><a :href="hostUrl(host)">🌐 {{ host }}</a></template>
+              <span class="session-group-icon">🌐</span>
-              <template v-else>🌐 Unbound host</template>
+              <a v-if="host" :href="hostUrl(host)" tabindex="-1" target="_blank" rel="noopener noreferrer">{{ host }}</a>
-            </h3>
+              <template v-else>Unbound host</template>
-            <div class="session-group-sessions">
+            </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 copyIp = async (ip) => {
-const getNetworkPrefix = ip => {
+  if (!ip) return
-  if (!ip) return null
+  try {
-
+    await navigator.clipboard.writeText(ip)
-  // IPv4?
+    authStore.showMessage('Full IP copied to clipboard!', 'success', 2000)
-  if (!ip.includes(':')) return ip
+  } catch (err) {
-
+    console.error('Failed to copy IP:', err)
-  // Normalize IPv6 using URL
+    authStore.showMessage('Failed to copy IP', 'error', 3000)
-  // 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 currentNetworkPrefix = computed(() => {
+const displayIp = ip => hostIP(ip) ?? ip
-  // Use hovered IP if available, otherwise fall back to current session
+
-  if (hoveredIp.value) return getNetworkPrefix(hoveredIp.value)
+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) => {
+const isSameHost = ip => currentHostIP.value && hostIP(ip) === currentHostIP.value
-  if (!currentNetworkPrefix.value || !ip) return false
-  return getNetworkPrefix(ip) === currentNetworkPrefix.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>

frontend/src/components/UserBasicInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="userLoaded" class="user-info">
+  <div v-if="userLoaded" class="user-info" :class="{ 'has-extra': $slots.default }">
     <h3 class="user-name-heading">
       <span class="icon">👤</span>
       <span class="user-name-row">
@@ -11,12 +11,17 @@
       <div class="org-line" v-if="orgDisplayName">{{ orgDisplayName }}</div>
       <div class="role-line" v-if="roleName">{{ roleName }}</div>
     </div>
-    <span><strong>Visits:</strong></span>
+    <div class="user-details">
-    <span>{{ visits || 0 }}</span>
+      <span class="date-label"><strong>Visits:</strong></span>
-    <span><strong>Registered:</strong></span>
+      <span class="date-value">{{ visits || 0 }}</span>
-    <span>{{ formatDate(createdAt) }}</span>
+      <span class="date-label"><strong>Registered:</strong></span>
-    <span><strong>Last seen:</strong></span>
+      <span class="date-value">{{ formatDate(createdAt) }}</span>
-    <span>{{ formatDate(lastSeen) }}</span>
+      <span class="date-label"><strong>Last seen:</strong></span>
+      <span class="date-value">{{ formatDate(lastSeen) }}</span>
+    </div>
+    <div v-if="$slots.default" class="user-info-extra">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
@@ -44,23 +49,59 @@ const userLoaded = computed(() => !!props.name)
 </script>
 
 <style scoped>
-.user-info { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
+.user-info.has-extra {
-.user-info h3 { grid-column: span 2; }
+  grid-template-columns: auto 1fr 2fr;
-.org-role-sub { grid-column: span 2; display:flex; flex-direction:column; margin: -0.15rem 0 0.25rem; }
+  grid-template-areas:
+    "heading heading extra"
+    "org org extra"
+    "label1 value1 extra"
+    "label2 value2 extra"
+    "label3 value3 extra";
+}
+
+.user-info:not(.has-extra) {
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    "heading heading"
+    "org org"
+    "label1 value1"
+    "label2 value2"
+    "label3 value3";
+}
+
+@media (max-width: 720px) {
+  .user-info.has-extra {
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      "heading heading"
+      "org org"
+      "label1 value1"
+      "label2 value2"
+      "label3 value3"
+      "extra extra";
+  }
+}
+
+.user-name-heading { grid-area: heading; display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 0.25rem 0; }
+.org-role-sub { grid-area: org; display:flex; flex-direction:column; margin: -0.15rem 0 0.25rem; }
 .org-line { font-size: .7rem; font-weight:600; line-height:1.1; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
 .role-line { font-size:.65rem; color: var(--color-text-muted); line-height:1.1; }
-.user-info span { text-align: left; }
+.info-label:nth-of-type(1) { grid-area: label1; }
-.user-name-heading { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.25rem 0; }
+.info-value:nth-of-type(2) { grid-area: value1; }
+.info-label:nth-of-type(3) { grid-area: label2; }
+.info-value:nth-of-type(4) { grid-area: value2; }
+.info-label:nth-of-type(5) { grid-area: label3; }
+.info-value:nth-of-type(6) { grid-area: value3; }
+.user-info-extra { grid-area: extra; padding-left: 2rem; border-left: 1px solid var(--color-border); }
 .user-name-row { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; }
 .user-name-row.editing { flex: 1 1 auto; }
-.icon { flex: 0 0 auto; }
 .display-name { font-weight: 600; font-size: 1.05em; line-height: 1.2; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .name-input { width: auto; flex: 1 1 140px; min-width: 120px; padding: 6px 8px; font-size: 0.9em; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface); color: var(--color-text); }
 .user-name-heading .name-input { width: auto; }
 .name-input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
-.mini-btn { width: auto; padding: 4px 6px; margin: 0; font-size: 0.75em; line-height: 1; background: var(--color-surface-muted); border: 1px solid var(--color-border-strong); border-radius: 6px; cursor: pointer; transition: background 0.2s, transform 0.15s, color 0.2s ease; color: var(--color-text); }
+.mini-btn { width: auto; padding: 4px 6px; margin: 0; font-size: 0.75em; line-height: 1; cursor: pointer; }
 .mini-btn:hover:not(:disabled) { background: var(--color-accent-soft); color: var(--color-accent); }
 .mini-btn:active:not(:disabled) { transform: translateY(1px); }
 .mini-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-@media (max-width: 480px) { .user-name-heading { flex-direction: column; align-items: flex-start; } .user-name-row.editing { width: 100%; } .display-name { max-width: 100%; } }
+@media (max-width: 720px) { .user-info-extra { padding-left: 0; padding-top: 1rem; margin-top: 1rem; border-left: none; border-top: 1px solid var(--color-border); } }
 </style>

frontend/src/utils/api.js

@@ -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()
   }
 }
 

frontend/src/utils/awaitable-websocket.js

@@ -18,12 +18,36 @@ class AwaitableWebSocket extends WebSocket {
     }
     this.onclose = e => {
       if (!this.#opened) {
-        reject(new Error(`WebSocket ${this.url} failed to connect, code ${e.code}`))
+        reject(new Error(`Failed to connect to server (code ${e.code})`))
         return
       }
-      this.#err = e.wasClean
+      // Create user-friendly close messages
-        ? new Error(`Websocket ${this.url} closed ${e.code}`)
+      let message
-        : new Error(`WebSocket ${this.url} closed with error ${e.code}`)
+      if (e.wasClean) {
+        // Standard close codes
+        switch (e.code) {
+          case 1000: message = 'Connection closed normally'; break
+          case 1001: message = 'Server is going away'; break
+          case 1002: message = 'Protocol error'; break
+          case 1003: message = 'Unsupported data received'; break
+          case 1006: message = 'Connection lost unexpectedly'; break
+          case 1007: message = 'Invalid data received'; break
+          case 1008: message = 'Policy violation'; break
+          case 1009: message = 'Message too large'; break
+          case 1010: message = 'Extension negotiation failed'; break
+          case 1011: message = 'Server encountered an error'; break
+          case 1012: message = 'Server is restarting'; break
+          case 1013: message = 'Server is overloaded, try again later'; break
+          case 1014: message = 'Bad gateway'; break
+          case 1015: message = 'TLS handshake failed'; break
+          default: message = `Connection closed (code ${e.code})`
+        }
+      } else {
+        message = e.code === 1006
+          ? 'Connection lost unexpectedly'
+          : `Connection closed with error (code ${e.code})`
+      }
+      this.#err = new Error(message)
       this.#waiting.splice(0).forEach(p => p.reject(this.#err))
     }
   }

frontend/src/utils/base64url.js

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

frontend/src/utils/helpers.js

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

frontend/src/utils/keynav.js

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

frontend/src/utils/passkey.js

@@ -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()
+    let res = await ws.receive_json()
-    console.log('Authentication options:', res)
+    if (res.status >= 400) throw new Error(res.detail || `Authentication failed: ${res.status}`)
-    // status field present means error
-    if (res.status) {
-      throw new Error(res.detail || `Authentication failed: ${res.status}`)
-    }
 
     const authResponse = await startAuthentication(res)
     ws.send_json(authResponse)
 
-    const result = await ws.receive_json()
+    res = await ws.receive_json()
-    if (result.status) {
+    if (res.status >= 400) throw new Error(res.detail || `Authentication failed: ${res.status}`)
-      throw new Error(result.detail || `Authentication failed: ${result.status}`)
+    return res
-    }
-    return result
   } catch (error) {
     console.error('Authentication error:', error)
     throw Error(error.name === "NotAllowedError" ? 'Passkey authentication cancelled' : error.message)

frontend/src/utils/pow-test.js

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

frontend/src/utils/pow.js

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

frontend/vite.config.js

@@ -5,17 +5,50 @@ import vue from '@vitejs/plugin-vue'
 import { existsSync, renameSync, mkdirSync } from 'node:fs'
 import sirv from 'sirv'
 
+// Auth host mode: when set, clients accessing the auth host get /auth/ at / and /auth/admin/ at /admin/
+const authHost = process.env.PASKIA_AUTH_HOST
+
 export default defineConfig(({ command }) => ({
   appType: 'mpa',
   publicDir: 'public',
   plugins: [
     vue(),
+    // Auth host routing: rewrite paths when accessing dedicated auth host
+    // Must run before serve-examples to handle / correctly
+    authHost && {
+      name: 'auth-host-routing',
+      configureServer(server) {
+        server.middlewares.use((req, _res, next) => {
+          const host = req.headers.host?.split(':')[0]
+          // Check if request is coming to the auth host
+          if (host === authHost) {
+            // Only rewrite specific paths that should map to /auth/*
+            // Rewrite / and /index.html to /auth/
+            if (req.url === '/' || req.url === '/index.html') {
+              req.url = '/auth/'
+            }
+            // Rewrite /admin/* to /auth/admin/*
+            else if (req.url.startsWith('/admin/') || req.url === '/admin') {
+              req.url = '/auth' + req.url
+            }
+            // Everything else (Vite paths, passphrase links, etc.) passes through unchanged
+          }
+          next()
+        })
+      }
+    },
     {
       name: 'serve-examples',
       configureServer(server) {
         const examplesDir = resolve(__dirname, '../examples')
         const serve = sirv(examplesDir, { dev: true })
         server.middlewares.use((req, _res, next) => {
+          // Skip redirect to examples on auth host (handled by auth-host-routing)
+          const host = req.headers.host?.split(':')[0]
+          if (authHost && host === authHost) {
+            next()
+            return
+          }
           if (req.url === '/' || req.url === '/index.html') req.url = '/examples/'
           next()
         })
@@ -46,25 +79,33 @@ export default defineConfig(({ command }) => ({
         }
       }
     }
-  ],
+  ].filter(Boolean),
   resolve: {
     alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }
   },
   base: '/',
   server: {
     port: 4403,
+    allowedHosts: true,
     fs: {
       allow: ['..']
     },
     proxy: {
       // Only proxy these two specific backend API paths
       '/auth/api': {
-        target: 'http://localhost:4402',
+        target: 'http://localhost:4402'
-        headers: { connection: 'close' }
       },
       '/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'
       }
     }
   },

paskia/authsession.py

@@ -71,7 +71,7 @@ async def get_reset(token: str) -> ResetToken:
     record = await db.instance.get_reset_token(reset_key(token))
     if record and record.expiry >= datetime.now(timezone.utc):
         return record
-    raise ValueError("This reset link is invalid or has expired")
+    raise ValueError("This authentication link is no longer valid.")
 
 
 async def get_session(token: str, host: str | None = None) -> Session:

paskia/fastapi/__main__.py

@@ -185,9 +185,13 @@ 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:
@@ -273,7 +277,7 @@ def main():
         }
 
         # Dev mode: enable reload when PASKIA_DEVMODE is set
-        devmode = os.environ.get("PASKIA_DEVMODE") == "1"
+        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
@@ -281,6 +285,8 @@ def main():
                 raise SystemExit(f"Dev mode requires localhost:4402, got {host}:{port}")
             run_kwargs["reload"] = True
             run_kwargs["reload_dirs"] = ["paskia"]
+            # Suppress uvicorn startup messages in dev mode
+            run_kwargs["log_level"] = "warning"
 
         if uds:
             run_kwargs["uds"] = uds

paskia/fastapi/admin.py

@@ -559,6 +559,7 @@ async def admin_get_user_detail(
         sessions_payload.append(
             {
                 "id": encode_session_key(entry.key),
+                "credential_uuid": str(entry.credential_uuid),
                 "host": entry.host,
                 "ip": entry.ip,
                 "user_agent": useragent.compact_user_agent(entry.user_agent),

paskia/fastapi/api.py

@@ -200,11 +200,37 @@ async def get_settings():
         "rp_id": pk.rp_id,
         "rp_name": pk.rp_name,
         "ui_base_path": base_path,
-        "auth_host": hostutil.configured_auth_host(),
+        "auth_host": hostutil.dedicated_auth_host(),
+        "auth_site_url": hostutil.auth_site_url(),
         "session_cookie": AUTH_COOKIE_NAME,
     }
 
 
+@app.get("/token-info")
+async def api_token_info(token: str):
+    """Get information about a reset token.
+
+    Returns:
+        - type: "reset"
+        - user_name: display name of the user
+        - token_type: type of reset token
+    """
+    if not passphrase.is_well_formed(token):
+        raise HTTPException(status_code=404, detail="Invalid token")
+
+    # Check if this is a reset token
+    try:
+        reset_token = await get_reset(token)
+        user = await db.instance.get_user_by_uuid(reset_token.user_uuid)
+        return {
+            "type": "reset",
+            "user_name": user.display_name,
+            "token_type": reset_token.token_type,
+        }
+    except (ValueError, Exception):
+        raise HTTPException(status_code=404, detail="Token not found or expired")
+
+
 @app.post("/user-info")
 async def api_user_info(
     request: Request,

paskia/fastapi/auth_host.py

@@ -73,7 +73,7 @@ def redirect_to_root_on_auth_host(request: Request, cur: str, path: str) -> Resp
 
 async def redirect_middleware(request: Request, call_next):
     """Middleware to handle auth host redirects."""
-    cfg = hostutil.configured_auth_host()
+    cfg = hostutil.dedicated_auth_host()
     if not cfg:
         return await call_next(request)
 

paskia/fastapi/mainapp.py

@@ -42,8 +42,12 @@ async def lifespan(app: FastAPI):  # pragma: no cover - startup path
         # Re-raise to fail fast
         raise
 
+    # Restore info level logging after startup (suppressed during uvicorn init in dev mode)
+    if frontend.is_dev_mode():
+        logging.getLogger("uvicorn").setLevel(logging.INFO)
+        logging.getLogger("uvicorn.access").setLevel(logging.INFO)
+
     yield
-    # (Optional) add shutdown cleanup here later
 
 
 app = FastAPI(lifespan=lifespan)
@@ -113,10 +117,14 @@ async def examples_page():
 
 
 # Note: this catch-all handler must be the last route defined
-@app.get("/{reset}")
+@app.get("/{token}")
-@app.get("/auth/{reset}")
+@app.get("/auth/{token}")
-async def reset_link(reset: str):
+async def token_link(token: str):
-    """Serve the reset app directly with an injected reset token."""
+    """Serve the reset app for reset tokens (password reset / device addition).
-    if not passphrase.is_well_formed(reset):
+
+    The frontend will validate the token via /auth/api/token-info.
+    """
+    if not passphrase.is_well_formed(token):
         raise HTTPException(status_code=404)
+
     return Response(*await frontend.read("/int/reset/index.html"))

paskia/fastapi/remote.py

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

paskia/fastapi/ws.py

@@ -1,57 +1,20 @@
-import logging
-from functools import wraps
 from uuid import UUID
 
-from fastapi import FastAPI, WebSocket, WebSocketDisconnect
+from fastapi import FastAPI, WebSocket
-from webauthn.helpers.exceptions import InvalidAuthenticationResponse
 
 from paskia.authsession import create_session, get_reset, get_session
-from paskia.fastapi import authz
+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
 
-
-# WebSocket error handling decorator
-def websocket_error_handler(func):
-    @wraps(func)
-    async def wrapper(ws: WebSocket, *args, **kwargs):
-        try:
-            await ws.accept()
-            return await func(ws, *args, **kwargs)
-        except WebSocketDisconnect:
-            pass
-        except authz.AuthException as e:
-            await ws.send_json(
-                {
-                    "status": e.status_code,
-                    **(await authz.auth_error_content(e)),
-                }
-            )
-        except (ValueError, InvalidAuthenticationResponse) as e:
-            await ws.send_json({"status": 401, "detail": str(e)})
-        except Exception:
-            logging.exception("Internal Server Error")
-            await ws.send_json({"status": 500, "detail": "Internal Server Error"})
-
-    return wrapper
-
-
 # Create a FastAPI subapp for WebSocket endpoints
 app = FastAPI()
 
-
+# Mount the remote auth WebSocket endpoints
-def _validate_origin(ws: WebSocket) -> str:
+app.mount("/remote-auth", remote.app)
-    """Extract and validate origin from WebSocket request headers.
-
-    Raises:
-        ValueError: If origin header is missing or not in allowed list
-    """
-    origin = ws.headers.get("origin")
-    if not origin:
-        raise ValueError("Origin header is required for WebSocket connections")
-    return passkey.instance.validate_origin(origin)
 
 
 async def register_chat(
@@ -86,7 +49,7 @@ async def websocket_register_add(
     - Normal session via auth cookie (requires recent authentication)
     - Reset token supplied as ?reset=... (auth cookie ignored)
     """
-    origin = _validate_origin(ws)
+    origin = validate_origin(ws)
     host = origin.split("://", 1)[1]
     if reset is not None:
         if not passphrase.is_well_formed(reset):
@@ -142,7 +105,7 @@ async def websocket_register_add(
 @app.websocket("/authenticate")
 @websocket_error_handler
 async def websocket_authenticate(ws: WebSocket, auth=AUTH_COOKIE):
-    origin = _validate_origin(ws)
+    origin = validate_origin(ws)
     host = origin.split("://", 1)[1]
 
     # If there's an existing session, restrict to that user's credentials (reauth)

paskia/fastapi/wsutil.py

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

paskia/frontend-build/auth/admin/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Admin</title>
-    <script type="module" crossorigin src="/auth/assets/admin-D8zxJOk4.js"></script>
-    <link rel="modulepreload" crossorigin href="/auth/assets/_plugin-vue_export-helper-R4vr2A9I.js">
-    <link rel="modulepreload" crossorigin href="/auth/assets/helpers-CU0-cyzg.js">
-    <link rel="modulepreload" crossorigin href="/auth/assets/AccessDenied-guOGfNm-.js">
-    <link rel="stylesheet" crossorigin href="/auth/assets/_plugin-vue_export-helper-Bx2cFCEC.css">
-    <link rel="stylesheet" crossorigin href="/auth/assets/AccessDenied-TAST_piX.css">
-    <link rel="stylesheet" crossorigin href="/auth/assets/admin-DIOoLLHy.css">
-  </head>
-  <body>
-    <div id="admin-app"></div>
-  </body>
-  </html>

paskia/frontend-build/auth/assets/RestrictedAuth-BIGLs28V.js

@@ -1 +0,0 @@
-import{_ as z,G as E,r as g,c as y,o as L,d,e as h,i as f,f as n,t as _,n as N,R as O,C as Y,Y as w,V as T,p as D}from"./_plugin-vue_export-helper-R4vr2A9I.js";const q={class:"app-shell"},G={key:0,class:"global-status",style:{display:"block"}},J={class:"view-root"},W={key:0,class:"surface surface--tight"},j={class:"view-header center"},H={key:0,class:"user-line"},K={class:"view-lede"},Q={class:"section-block"},X={class:"section-body center"},Z={class:"button-row center"},ee=["disabled"],te=["disabled"],ae=["disabled"],se=["disabled"],ne={__name:"RestrictedAuth",props:{mode:{type:String,default:"login",validator:o=>["login","reauth","forbidden"].includes(o)}},emits:["authenticated","forbidden","logout","back","home","auth-error"],setup(o,{expose:V,emit:$}){const v=o,m=$,i=E({show:!1,message:"",type:"info"}),b=g(!0),t=g(!1),S=g(null),r=g(null),l=g("initial");let p=null;const u=y(()=>!!r.value?.authenticated),k=y(()=>b.value?!1:v.mode==="reauth"?!0:l.value!=="forbidden"),U=y(()=>v.mode==="reauth"?"🔐 Additional Authentication":l.value==="forbidden"?"🚫 Forbidden":`🔐 ${S.value?.rp_name||location.origin}`),B=y(()=>v.mode==="reauth"?"Please verify your identity to continue with this action.":l.value==="forbidden"?"You lack the required permissions.":"Please sign in with your passkey."),F=y(()=>r.value?.user?.user_name||"User");function c(e,a="info",s=3e3){i.show=!0,i.message=e,i.type=a,p&&clearTimeout(p),s>0&&(p=setTimeout(()=>{i.show=!1},s))}async function I(){try{const e=await Y();if(S.value=e,e?.rp_name){const a=v.mode==="reauth"?"Verify Identity":u.value?"Forbidden":"Sign In";document.title=`${e.rp_name} · ${a}`}}catch(e){console.warn("Unable to load settings",e)}}async function M(){try{r.value=await w("/auth/api/user-info",{method:"POST"}),u.value&&v.mode!=="reauth"?(l.value="forbidden",m("forbidden",r.value)):l.value="login"}catch(e){console.error("Failed to load user info",e),e.status!==401&&e.status!==403&&c(T(e),"error",4e3),r.value=null,l.value="login"}}async function A(){if(!k.value||t.value)return;t.value=!0,c("Starting authentication…","info");let e;try{e=await D.authenticate()}catch(a){t.value=!1;const s=a?.message||"Passkey authentication cancelled",P=s==="Passkey authentication cancelled";c(s,P?"info":"error",4e3),m("auth-error",{message:s,cancelled:P});return}try{await x(e)}catch(a){t.value=!1;const s=a?.message||"Failed to establish session";c(s,"error",4e3),m("auth-error",{message:s,cancelled:!1});return}t.value=!1,m("authenticated",e)}async function C(){if(!t.value){t.value=!0;try{await w("/auth/api/logout",{method:"POST"}),r.value=null,l.value="login",c("Logged out. You can sign in with a different account.","info",3e3)}catch(e){c(T(e),"error",4e3)}finally{t.value=!1}m("logout")}}function R(){const e=window.open("/auth/","passkey_auth_profile");e&&e.focus()}async function x(e){if(!e?.session_token)throw console.error("setSessionCookie called with missing session_token:",e),new Error("Authentication response missing session_token");return await w("/auth/api/set-session",{method:"POST",headers:{Authorization:`Bearer ${e.session_token}`}})}return L(async()=>{await I(),await M(),b.value=!1}),V({showMessage:c,isAuthenticated:u,userInfo:r}),(e,a)=>(h(),d("div",q,[i.show?(h(),d("div",G,[n("div",{class:N(["status",i.type])},_(i.message),3)])):f("",!0),n("main",J,[b.value?f("",!0):(h(),d("div",W,[n("header",j,[n("h1",null,_(U.value),1),u.value?(h(),d("p",H,"👤 "+_(F.value),1)):f("",!0),n("p",K,_(B.value),1)]),n("section",Q,[n("div",X,[n("div",Z,[O(e.$slots,"actions",{loading:t.value,canAuthenticate:k.value,isAuthenticated:u.value,authenticate:A,logout:C,mode:o.mode},()=>[n("button",{class:"btn-secondary",disabled:t.value,onClick:a[0]||(a[0]=s=>e.$emit("back"))},"Back",8,ee),k.value?(h(),d("button",{key:0,class:"btn-primary",disabled:t.value,onClick:A},_(t.value?o.mode==="reauth"?"Verifying…":"Signing in…":o.mode==="reauth"?"Verify":"Login"),9,te)):f("",!0),u.value&&o.mode!=="reauth"?(h(),d("button",{key:1,class:"btn-danger",disabled:t.value,onClick:C},"Logout",8,ae)):f("",!0),u.value&&o.mode!=="reauth"?(h(),d("button",{key:2,class:"btn-primary",disabled:t.value,onClick:R},"Profile",8,se)):f("",!0)])])])])]))])]))}},ie=z(ne,[["__scopeId","data-v-d00079a6"]]);export{ie as R};

paskia/frontend-build/auth/assets/RestrictedAuth-CMHKrNJh.css

@@ -1 +0,0 @@
-.button-row.center[data-v-d00079a6]{display:flex;justify-content:center;gap:.75rem}.user-line[data-v-d00079a6]{margin:.5rem 0 0;font-weight:500;color:var(--color-text)}main.view-root[data-v-d00079a6]{min-height:100vh;align-items:center;justify-content:center;padding:2rem 1rem}.surface.surface--tight[data-v-d00079a6]{max-width:520px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:1.75rem}

paskia/frontend-build/auth/assets/auth-CBojJKUK.css

@@ -1 +0,0 @@
-.view-lede[data-v-0cc830bd]{margin:0;color:var(--color-text-muted);font-size:1rem}.section-header[data-v-0cc830bd]{display:flex;flex-direction:column;gap:.4rem}.section-description[data-v-0cc830bd]{margin:0;color:var(--color-text-muted)}.empty-state[data-v-0cc830bd]{margin:0;color:var(--color-text-muted);text-align:center;padding:1rem 0}.logout-button[data-v-0cc830bd]{align-self:flex-start}.logout-row[data-v-0cc830bd]{gap:1rem}.logout-row.single[data-v-0cc830bd]{justify-content:flex-start}.logout-note[data-v-0cc830bd]{margin:.75rem 0 0;color:var(--color-text-muted);font-size:.875rem}@media(max-width:720px){.logout-button[data-v-0cc830bd]{width:100%}}.host-view[data-v-88828278]{padding:3rem 1.5rem 4rem}.host-actions[data-v-88828278]{display:flex;flex-direction:column;gap:.75rem}.host-actions .button-row[data-v-88828278]{gap:.75rem;flex-wrap:wrap}.host-actions .button-row button[data-v-88828278]{flex:0 0 auto}.note[data-v-88828278],.empty-state[data-v-88828278]{margin:0;color:var(--color-text-muted)}@media(max-width:600px){.host-actions .button-row[data-v-88828278]{flex-direction:column}.host-actions .button-row button[data-v-88828278]{width:100%}}

paskia/frontend-build/auth/assets/forward-BHNzlQhM.js

@@ -1 +0,0 @@
-import{c as o,W as d,o as i,h as s,e as m,u as l,v as h}from"./_plugin-vue_export-helper-R4vr2A9I.js";import{R as p}from"./RestrictedAuth-BIGLs28V.js";import{g as n}from"./helpers-CU0-cyzg.js";const f={__name:"RestrictedForward",setup(w){const a=o(()=>d()),r=o(()=>{const t=document.documentElement.getAttribute("data-mode");return t==="reauth"?"reauth":t==="forbidden"?"forbidden":"login"});function c(){location.reload()}function u(){const e=a.value||"/auth/";window.location.pathname!==e&&history.replaceState(null,"",e),window.location.href=e}return i(()=>{window.addEventListener("keydown",e=>{e.key==="Escape"&&n()})}),(e,t)=>(m(),s(p,{mode:r.value,onAuthenticated:c,onBack:l(n),onHome:u},null,8,["mode","onBack"]))}};h(f).mount("#app");

paskia/frontend-build/auth/assets/helpers-CU0-cyzg.js

@@ -1 +0,0 @@
-function f(r){if(!r)return"Never";const s=new Date(r),u=s-new Date,e=u>0,a=Math.abs(u),n=Math.round(a/(1e3*60)),o=Math.round(a/(1e3*60*60)),t=Math.round(a/(1e3*60*60*24));return a<1e3*60?"Now":n<=60?e?`In ${n} minute${n===1?"":"s"}`:n===1?"a minute ago":`${n} minutes ago`:o<=24?e?`In ${o} hour${o===1?"":"s"}`:o===1?"an hour ago":`${o} hours ago`:t<=14?e?`In ${t} day${t===1?"":"s"}`:t===1?"a day ago":`${t} days ago`:s.toLocaleDateString(void 0,{year:"numeric",month:"long",day:"numeric"})}const c=()=>history.back()||window.close();export{f,c as g};

paskia/frontend-build/auth/assets/reset-DXzuKgh6.css

@@ -1 +0,0 @@
-.center[data-v-4f202f9a]{text-align:center}.button-row.center[data-v-4f202f9a]{display:flex;justify-content:center}.section-body[data-v-4f202f9a]{gap:1.25rem}.name-edit span[data-v-4f202f9a]{color:var(--color-text-muted);font-size:.9rem}

paskia/frontend-build/auth/assets/reset-YnZxhnI5.js

@@ -1 +0,0 @@
-import{_ as M,G as F,r as i,c as v,W as b,o as U,d as c,e as u,i as V,f as t,t as g,n as $,z,A as E,S as I,C as N,q as R,X as D,V as K,p as O,v as j}from"./_plugin-vue_export-helper-R4vr2A9I.js";const q={class:"app-shell"},G={key:0,class:"global-status",style:{display:"block"}},H={class:"view-root"},J={class:"surface surface--tight",style:{"max-width":"560px",margin:"0 auto",width:"100%"}},L={class:"view-header",style:{"text-align":"center"}},W={class:"view-lede"},X={key:0,class:"section-block"},Y={key:1,class:"section-block"},Q={class:"section-body center"},Z={key:2,class:"section-block"},ee={class:"section-body"},se={class:"name-edit"},te=["disabled"],ae=["disabled"],ne={__name:"ResetApp",setup(ie){const o=F({show:!1,message:"",type:"info"}),d=i(!0),n=i(!1),r=i(""),x=i(null),p=i(null),f=i(""),m=i("");let h=null;const P=v(()=>p.value?.session_type||"your enrollment"),S=v(()=>d.value?"Preparing your secure enrollment…":y.value?`Finish up ${P.value}. You may edit the name below if needed, and it will be saved to your passkey.`:"This reset link is no longer valid.");v(()=>b());const y=v(()=>!!(r.value&&p.value));function l(e,s="info",a=3e3){o.show=!0,o.message=e,o.type=s,h&&clearTimeout(h),a>0&&(h=setTimeout(()=>{o.show=!1},a))}async function T(){try{const e=await N();x.value=e,e?.rp_name&&(document.title=`${e.rp_name} · Passkey Setup`)}catch(e){console.warn("Unable to load settings",e)}}async function C(){if(r.value)try{p.value=await R(`/auth/api/user-info?reset=${encodeURIComponent(r.value)}`,{method:"POST"}),f.value=p.value?.user?.user_name||""}catch(e){console.error("Failed to load user info",e);const s=e instanceof D?e.data?.detail||"Reset link is invalid or expired.":K(e);m.value=s,l(s,"error",0)}}async function _(){if(!y.value||n.value)return;n.value=!0,l("Starting passkey registration…","info");let e;try{const s=f.value.trim()||null;e=await O.register(r.value,s)}catch(s){n.value=!1;const a=s?.message||"Passkey registration cancelled",k=a==="Passkey registration cancelled";l(k?a:`Registration failed: ${a}`,k?"info":"error",4e3);return}try{await A(e)}catch(s){n.value=!1;const a=s?.message||"Failed to establish session";l(a,"error",4e3);return}l("Passkey registered successfully!","success",800),setTimeout(()=>{n.value=!1,w()},800)}async function A(e){if(!e?.session_token)throw new Error("Registration response missing session_token");return await R("/auth/api/set-session",{method:"POST",headers:{Authorization:`Bearer ${e.session_token}`}})}function w(){const e=b.value||"/auth/";window.location.pathname!==e&&history.replaceState(null,"",e),window.location.reload()}function B(){const e=window.location.pathname.split("/").filter(Boolean);if(!e.length)return"";const s=e[e.length-1],a=e.slice(0,-1);return a.length>1||a.length===1&&a[0]!=="auth"||!s.includes(".")?"":s}return U(async()=>{if(r.value=B(),await T(),!r.value){const e="Reset link is missing or malformed.";m.value=e,l(e,"error",0),d.value=!1;return}await C(),d.value=!1}),(e,s)=>(u(),c("div",q,[o.show?(u(),c("div",G,[t("div",{class:$(["status",o.type])},g(o.message),3)])):V("",!0),t("main",H,[t("div",J,[t("header",L,[s[1]||(s[1]=t("h1",null,"🔑 Registration",-1)),t("p",W,g(S.value),1)]),d.value?(u(),c("section",X,[...s[2]||(s[2]=[t("div",{class:"section-body center"},[t("p",null,"Loading reset details…")],-1)])])):y.value?(u(),c("section",Z,[t("div",ee,[t("label",se,[s[3]||(s[3]=t("span",null,"👤 Name",-1)),z(t("input",{type:"text","onUpdate:modelValue":s[0]||(s[0]=a=>f.value=a),disabled:n.value,maxlength:"64",onKeyup:I(_,["enter"])},null,40,te),[[E,f.value]])]),t("button",{class:"btn-primary",disabled:n.value,onClick:_},g(n.value?"Registering…":"Register Passkey"),9,ae)])])):(u(),c("section",Y,[t("div",Q,[t("p",null,g(m.value),1),t("div",{class:"button-row center",style:{"justify-content":"center"}},[t("button",{class:"btn-secondary",onClick:w},"Return to sign-in")])])]))])])]))}},oe=M(ne,[["__scopeId","data-v-4f202f9a"]]);j(oe).mount("#app");

paskia/frontend-build/auth/assets/restricted-DVCvYFGN.js

@@ -1 +0,0 @@
-import{c as r,o as c,h as i,e as d,v as u}from"./_plugin-vue_export-helper-R4vr2A9I.js";import{R as p}from"./RestrictedAuth-BIGLs28V.js";const h={__name:"RestrictedApi",setup(m){const a=r(()=>{const n=new URLSearchParams(window.location.hash.slice(1)).get("mode");return n==="reauth"?"reauth":n==="forbidden"?"forbidden":"login"});function t(e){window.parent&&window.parent!==window&&window.parent.postMessage(e,"*")}function s(e){t({type:"auth-success",authenticated:!0,sessionToken:e.session_token})}function o(){t({type:"auth-back"})}return c(()=>{t({type:"auth-ready"}),window.addEventListener("keydown",e=>{e.key==="Escape"&&o()})}),(e,n)=>(d(),i(p,{mode:a.value,onAuthenticated:s,onBack:o},null,8,["mode"]))}};u(h).mount("#app");

paskia/frontend-build/auth/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Auth Profile</title>
-    <script type="module" crossorigin src="/auth/assets/auth-a0yJ_sei.js"></script>
-    <link rel="modulepreload" crossorigin href="/auth/assets/_plugin-vue_export-helper-R4vr2A9I.js">
-    <link rel="modulepreload" crossorigin href="/auth/assets/helpers-CU0-cyzg.js">
-    <link rel="modulepreload" crossorigin href="/auth/assets/AccessDenied-guOGfNm-.js">
-    <link rel="stylesheet" crossorigin href="/auth/assets/_plugin-vue_export-helper-Bx2cFCEC.css">
-    <link rel="stylesheet" crossorigin href="/auth/assets/AccessDenied-TAST_piX.css">
-    <link rel="stylesheet" crossorigin href="/auth/assets/auth-CBojJKUK.css">
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>

paskia/frontend-build/auth/restricted/index.html

@@ -1,9 +0,0 @@
-<html style="background: transparent">
-<script type="module" crossorigin src="/auth/assets/restricted-DVCvYFGN.js"></script>
-<link rel="modulepreload" crossorigin href="/auth/assets/_plugin-vue_export-helper-R4vr2A9I.js">
-<link rel="modulepreload" crossorigin href="/auth/assets/RestrictedAuth-BIGLs28V.js">
-<link rel="stylesheet" crossorigin href="/auth/assets/_plugin-vue_export-helper-Bx2cFCEC.css">
-<link rel="stylesheet" crossorigin href="/auth/assets/RestrictedAuth-CMHKrNJh.css">
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<div id="app"></div>

paskia/frontend-build/int/forward/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Access Restricted</title>
-    <script type="module" crossorigin src="/auth/assets/forward-BHNzlQhM.js"></script>
-    <link rel="modulepreload" crossorigin href="/auth/assets/_plugin-vue_export-helper-R4vr2A9I.js">
-    <link rel="modulepreload" crossorigin href="/auth/assets/RestrictedAuth-BIGLs28V.js">
-    <link rel="modulepreload" crossorigin href="/auth/assets/helpers-CU0-cyzg.js">
-    <link rel="stylesheet" crossorigin href="/auth/assets/_plugin-vue_export-helper-Bx2cFCEC.css">
-    <link rel="stylesheet" crossorigin href="/auth/assets/RestrictedAuth-CMHKrNJh.css">
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>

paskia/frontend-build/int/reset/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Complete Passkey Setup</title>
-    <script type="module" crossorigin src="/auth/assets/reset-YnZxhnI5.js"></script>
-    <link rel="modulepreload" crossorigin href="/auth/assets/_plugin-vue_export-helper-R4vr2A9I.js">
-    <link rel="stylesheet" crossorigin href="/auth/assets/_plugin-vue_export-helper-Bx2cFCEC.css">
-    <link rel="stylesheet" crossorigin href="/auth/assets/reset-DXzuKgh6.css">
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>

paskia/globals.py

@@ -39,6 +39,8 @@ async def init(
     In FastAPI lifespan we call with bootstrap=False to avoid duplicate bootstrapping
     since the CLI performs it once before servers start.
     """
+    from . import remoteauth
+
     # Initialize passkey instance with provided parameters
     passkey.instance = Passkey(
         rp_id=rp_id,
@@ -54,6 +56,9 @@ async def init(
 
         await sql.init()
 
+    # Initialize remote auth manager
+    await remoteauth.init()
+
     if bootstrap:
         # Bootstrap system if needed
         from .bootstrap import bootstrap_if_needed

paskia/remoteauth.py

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

paskia/util/frontend.py

@@ -8,7 +8,10 @@ import httpx
 
 __all__ = ["path", "file", "read", "is_dev_mode"]
 
-DEV_SERVER = "http://localhost:4403"
+
+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
 
 
 def _resolve_static_dir() -> Path:
@@ -34,7 +37,7 @@ def file(*parts: str) -> Path:
 
 def is_dev_mode() -> bool:
     """Check if we're running in dev mode (Vite frontend server)."""
-    return os.environ.get("PASKIA_DEVMODE") == "1"
+    return bool(_get_dev_server())
 
 
 async def read(filepath: str) -> tuple[bytes, int, dict[str, str]]:
@@ -51,8 +54,9 @@ async def read(filepath: str) -> tuple[bytes, int, dict[str, str]]:
         FastAPI Response(*args) or Sanic raw response.
     """
     if is_dev_mode():
+        dev_server = _get_dev_server()
         async with httpx.AsyncClient() as client:
-            resp = await client.get(f"{DEV_SERVER}{filepath}")
+            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

paskia/util/hostutil.py

@@ -19,7 +19,7 @@ def is_root_mode() -> bool:
     return _load_config().get("auth_host") is not None
 
 
-def configured_auth_host() -> str | None:
+def dedicated_auth_host() -> str | None:
     """Return configured auth_host netloc, or None."""
     auth_host = _load_config().get("auth_host")
     if not auth_host:
@@ -34,7 +34,7 @@ def ui_base_path() -> str:
     return "/" if is_root_mode() else "/auth/"
 
 
-def auth_site_base_url() -> str:
+def auth_site_url() -> str:
     """Return the base URL for the auth site UI (computed at startup)."""
     cfg = _load_config()
     return cfg.get("site_url", "https://localhost") + cfg.get("site_path", "/auth/")
@@ -42,7 +42,7 @@ def auth_site_base_url() -> str:
 
 def reset_link_url(token: str) -> str:
     """Generate a reset link URL for the given token."""
-    return f"{auth_site_base_url()}{token}"
+    return f"{auth_site_url()}{token}"
 
 
 def normalize_origin(origin: str) -> str:

paskia/util/passphrase.py

@@ -3,6 +3,7 @@ import secrets
 from paskia.util.wordlist import words
 
 N_WORDS = 5
+N_WORDS_SHORT = 3
 
 wset = set(words)
 

paskia/util/pow.py

@@ -0,0 +1,45 @@
+"""
+Proof of Work utility using PBKDF2-SHA512.
+
+The PoW requires finding nonces where PBKDF2(challenge, nonce) produces
+output with a zero first byte. Each work unit requires finding one such nonce.
+All valid nonces are concatenated into a solution for server verification.
+"""
+
+import hashlib
+import secrets
+
+EASY = 2  # Around 0.25s
+NORMAL = 8  # Around 1s
+HARD = 32  # Around 4s
+
+
+def generate_challenge() -> bytes:
+    """Generate a random 8-byte challenge."""
+    return secrets.token_bytes(8)
+
+
+def verify_pow(challenge: bytes, solution: bytes, work: int = NORMAL) -> None:
+    """Verify a Proof of Work solution.
+
+    Args:
+        challenge: 8-byte server-provided challenge
+        solution: Concatenated 8-byte nonces (8 * work bytes)
+        work: Number of work units expected
+
+    Raises:
+        ValueError: If the solution is invalid
+    """
+    if len(challenge) != 8:
+        raise ValueError("Invalid challenge length")
+
+    if len(solution) != 8 * work:
+        raise ValueError("Invalid solution length")
+
+    # Verify each work unit - check that PBKDF2 output starts with 0x00
+    for i in range(work):
+        nonce = solution[i * 8 : (i + 1) * 8]
+        # Require first byte of PBKDF2-SHA512 to be zero
+        result = hashlib.pbkdf2_hmac("sha512", challenge, nonce, 128, 2)
+        if result[0] or result[1] & 0x07:
+            raise ValueError("Invalid PoW solution")

paskia/util/tokens.py

@@ -1,7 +1,8 @@
-import base64
 import hashlib
 import secrets
 
+import base64url
+
 from paskia.util.passphrase import is_well_formed
 
 
@@ -12,21 +13,20 @@ def create_token() -> str:
 def session_key(token: str) -> bytes:
     if len(token) != 16:
         raise ValueError("Session token must be exactly 16 characters long")
-    return b"sess" + base64.urlsafe_b64decode(token)
+    return b"sess" + base64url.dec(token)
 
 
 def encode_session_key(key: bytes) -> str:
     """Encode an opaque session key for external representation."""
-    return base64.urlsafe_b64encode(key).decode().rstrip("=")
+    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")
-    padding = "=" * (-len(encoded) % 4)
     try:
-        raw = base64.urlsafe_b64decode(encoded + padding)
+        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"):

pyproject.toml

@@ -79,6 +79,7 @@ dev = [
     "pytest>=9.0.1",
     "pytest-asyncio>=1.3.0",
     "pytest-cov>=7.0.0",
+    "ruff>=0.14.8",
 ]
 
 [project.scripts]

scripts/dev.py

@@ -1,156 +0,0 @@
-#!/usr/bin/env -S uv run
-"""Run Vite development server for frontend and FastAPI backend with auto-reload.
-
-This script is only available when running from the git repository source,
-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...]
-
-The optional host:port argument sets where the Vite frontend listens.
-All other options are forwarded to `paskia serve`.
-Backend always listens on localhost:4402.
-"""
-
-import argparse
-import atexit
-import os
-import shutil
-import signal
-import subprocess
-import sys
-from pathlib import Path
-from sys import stderr
-from threading import Thread
-
-from paskia.fastapi.__main__ import parse_endpoint
-
-DEFAULT_VITE_PORT = 4403  # overrides by CLI option
-BACKEND_PORT = 4402  # hardcoded, also in vite.config.ts
-
-NO_FRONTEND_TOOL = """\
-┃ ⚠️  deno, npm or bunx needed to run the frontend server.
-"""
-
-BUN_BUG = """\
-┃ ⚠️  Bun cannot correctly proxy API requests to the backend.
-┃ Bug report: https://github.com/oven-sh/bun/issues/9882
-┃
-┃ Options:
-┃   - sudo caddy run --config caddy/Caddyfile.dev
-┃   - Install deno or npm instead
-┃
-┃ Caddy will skip the Vite for API calls and serve everything at port 443.
-┃ Otherwise Vite serves at port 8077 and proxies to backend (broken with bun).
-"""
-
-NO_FRONTEND = """\
-┃
-┃ The backend will still try reaching Vite at {vite_url}
-┃ for various frontend assets, so make sure to start it manually.
-"""
-
-
-def run_vite(vite_url: str, vite_host: str | None, vite_port: int):
-    """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():
-        stderr.write(
-            f"┃ ⚠️  Frontend source not found at {devpath}\n"
-            + NO_FRONTEND.format(vite_url=vite_url)
-        )
-        return
-
-    options = [
-        ("deno", "run", "dev"),
-        ("npm", "run", "dev", "--"),
-        ("bunx", "--bun", "vite"),
-    ]
-    cmd = None
-    tool_name = None
-    for option in options:
-        if tool := shutil.which(option[0]):
-            cmd = [tool, *option[1:]]
-            tool_name = option[0]
-            break
-
-    # Add Vite CLI args for host/port
-    vite_args = ["--port", str(vite_port)]
-    if vite_host:
-        vite_args.extend(["--host", vite_host])
-
-    vite_process = None
-
-    def start_vite():
-        nonlocal vite_process
-        if cmd is None:
-            stderr.write(NO_FRONTEND_TOOL + NO_FRONTEND.format(vite_url=vite_url))
-            return
-        assert tool_name is not None
-        try:
-            if tool_name == "bunx":
-                stderr.write(BUN_BUG)
-
-            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)
-        except Exception as e:
-            stderr.write(
-                f"┃ ⚠️  Vite couldn't start: {e}\n"
-                + NO_FRONTEND.format(vite_url=vite_url)
-            )
-
-    def cleanup():
-        if vite_process:
-            vite_process.terminate()
-            vite_process.wait()
-
-    # Start Vite in a separate thread
-    vite_thread = Thread(target=start_vite, daemon=True)
-    vite_thread.start()
-
-    atexit.register(cleanup)
-    signal.signal(signal.SIGTERM, lambda *_: cleanup())
-    signal.signal(signal.SIGINT, lambda *_: cleanup())
-
-
-def main():
-    # Parse optional hostport argument for Vite frontend
-    parser = argparse.ArgumentParser(add_help=False)
-    parser.add_argument("hostport", nargs="?", default=None)
-    args, remaining = parser.parse_known_args()
-
-    # Parse Vite endpoint
-    vite_host, vite_port, vite_uds, all_ifaces = parse_endpoint(
-        args.hostport, DEFAULT_VITE_PORT
-    )
-
-    if vite_uds:
-        raise SystemExit("┃ ⚠️  Unix sockets are not supported for Vite frontend")
-
-    # Handle all-interfaces case (:port syntax)
-    # Vite uses 0.0.0.0 to listen on all interfaces (IPv4 only, sufficient for dev)
-    if all_ifaces:
-        vite_host = "0.0.0.0"
-
-    # Build Vite URL for PASKIA_DEVMODE (always use localhost for URL)
-    vite_url = f"http://localhost:{vite_port}"
-
-    # Start Vite dev server
-    run_vite(vite_url, vite_host, vite_port)
-
-    # Set dev mode with Vite URL
-    os.environ["PASKIA_DEVMODE"] = vite_url
-
-    # Import CLI after environment is set up
-    from paskia.fastapi.__main__ import main as cli_main
-
-    # Build argv for the main CLI in Dev mode
-    # Backend always listens on localhost only (Vite proxies API requests)
-    sys.argv = ["paskia", "serve", f"localhost:{BACKEND_PORT}"] + remaining
-    cli_main()
-
-
-if __name__ == "__main__":
-    main()

scripts/devserver.py

@@ -0,0 +1,453 @@
+#!/usr/bin/env -S uv run
+"""Run Vite development server for frontend and FastAPI backend with auto-reload.
+
+This script is only available when running from the git repository source,
+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...]
+
+The optional host:port argument sets where the Vite frontend listens.
+All other options are forwarded to `paskia serve`.
+Backend always listens on localhost:4402.
+
+Options:
+    --caddy         Run Caddy as HTTPS proxy on port 443 (requires sudo)
+    --rp-id HOST    Relying Party ID (used as hostname for Caddy)
+    --origin URL    Allowed origin(s), passed to backend
+    --auth-host H   Dedicated auth host, passed to backend
+"""
+
+import argparse
+import atexit
+import ipaddress
+import json
+import os
+import shutil
+import signal
+import subprocess
+from pathlib import Path
+from sys import stderr
+from threading import Thread
+from urllib.parse import urlparse
+
+DEFAULT_VITE_PORT = 4403  # overrides by CLI option
+BACKEND_PORT = 4402  # hardcoded, also in vite.config.ts
+CADDY_PORT = 443  # HTTPS port for Caddy proxy
+CADDY_HTTP_PORT = 80  # HTTP port for ACME challenges
+DEFAULT_HOST = "localhost"
+
+NO_FRONTEND_TOOL = """\
+┃ ⚠️  deno, npm or bunx needed to run the frontend server.
+"""
+
+BUN_BUG = """\
+┃ ⚠️  Bun cannot correctly proxy API requests to the backend.
+┃ Bug report: https://github.com/oven-sh/bun/issues/9882
+┃
+┃ Options:
+┃   - sudo caddy run --config caddy/Caddyfile.dev
+┃   - Install deno or npm instead
+┃
+┃ Caddy will skip the Vite for API calls and serve everything at port 443.
+┃ Otherwise Vite serves at port 8077 and proxies to backend (broken with bun).
+"""
+
+NO_FRONTEND = """\
+┃
+┃ The backend will still try reaching Vite at {vite_url}
+┃ for various frontend assets, so make sure to start it manually.
+"""
+
+CADDYFILE_SITE_BLOCK = """\
+SITE_ADDR {
+    # WebSockets bypass directly to backend (workaround for bun proxy bug)
+	handle /auth/ws/* {
+		reverse_proxy localhost:BACKEND_PORT
+	}
+	# Everything else goes to or via Vite
+	handle {
+		reverse_proxy localhost:VITE_PORT
+	}
+}
+"""
+
+
+def parse_endpoint(
+    value: str | None, default_port: int
+) -> tuple[str | None, int | None, str | None, bool]:
+    """Parse an endpoint for Vite (simplified version for dev.py).
+
+    Returns (host, port, uds_path, all_ifaces).
+    """
+    if not value:
+        return DEFAULT_HOST, default_port, None, False
+
+    # Port only (numeric) -> localhost:port
+    if value.isdigit():
+        return DEFAULT_HOST, int(value), None, False
+
+    # Leading colon :port -> bind all interfaces
+    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)
+    if value.count(":") > 1 and not value.startswith("["):
+        try:
+            ipaddress.IPv6Address(value)
+        except ValueError as e:
+            raise SystemExit(f"Invalid IPv6 address '{value}': {e}")
+        return value, default_port, None, False
+
+    # Use urllib.parse for everything else
+    parsed = urlparse(f"//{value}")
+    host = parsed.hostname or DEFAULT_HOST
+    port = parsed.port or default_port
+
+    return host, port, None, False
+
+
+def run_vite(vite_url: str, vite_host: str | None, vite_port: int, 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():
+        stderr.write(
+            f"┃ ⚠️  Frontend source not found at {devpath}\n"
+            + NO_FRONTEND.format(vite_url=vite_url)
+        )
+        return
+
+    options = [
+        ("deno", "run", "dev"),
+        ("npm", "--silent", "run", "dev", "--"),
+        ("bunx", "--bun", "vite"),
+    ]
+    cmd = None
+    tool_name = None
+    for option in options:
+        if tool := shutil.which(option[0]):
+            cmd = [tool, *option[1:]]
+            tool_name = option[0]
+            break
+
+    # Add Vite CLI args for host/port
+    vite_args = ["--port", str(vite_port), "--logLevel", "silent"]
+    if vite_host:
+        vite_args.extend(["--host", vite_host])
+
+    vite_process = None
+
+    def start_vite():
+        nonlocal vite_process
+        if cmd is None:
+            stderr.write(NO_FRONTEND_TOOL + NO_FRONTEND.format(vite_url=vite_url))
+            return
+        assert tool_name is not None
+        try:
+            if tool_name == "bunx":
+                stderr.write(BUN_BUG)
+
+            full_cmd = cmd + vite_args
+            stderr.write(f">>> {' '.join([tool_name, *full_cmd[1:]])}\n")
+            vite_env = os.environ.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"
+                + NO_FRONTEND.format(vite_url=vite_url)
+            )
+
+    def cleanup():
+        if vite_process:
+            vite_process.terminate()
+            vite_process.wait()
+
+    # Start Vite in a separate thread
+    vite_thread = Thread(target=start_vite, daemon=True)
+    vite_thread.start()
+
+    atexit.register(cleanup)
+    signal.signal(signal.SIGTERM, lambda *_: cleanup())
+    signal.signal(signal.SIGINT, lambda *_: cleanup())
+
+
+def run_caddy(origins: list[str], vite_port: int) -> subprocess.Popen | None:
+    """Spawn Caddy as HTTPS reverse proxy for the given origins."""
+    caddy_path = shutil.which("caddy")
+    if not caddy_path:
+        stderr.write("┃ ⚠️  Caddy not found. Install it to use --caddy option.\n")
+        return None
+
+    # Build Caddyfile with a site block for each origin
+    caddyfile_parts = []
+    for origin in origins:
+        parsed = urlparse(origin)
+        # Extract scheme://host:port from origin URL
+        scheme = parsed.scheme or "https"
+        host = parsed.hostname or parsed.path  # handle case without scheme
+        port = parsed.port or (CADDY_HTTP_PORT if scheme == "http" else CADDY_PORT)
+        # Use standard ports without explicit port in address (cleaner URLs)
+        if port in (80, 443):
+            site_addr = f"{scheme}://{host}"
+        else:
+            site_addr = f"{scheme}://{host}:{port}"
+        block = (
+            CADDYFILE_SITE_BLOCK.replace("SITE_ADDR", site_addr)
+            .replace("BACKEND_PORT", str(BACKEND_PORT))
+            .replace("VITE_PORT", str(vite_port))
+        )
+        caddyfile_parts.append(block)
+
+    caddyfile = "\n".join(caddyfile_parts)
+    caddy_process = None
+
+    try:
+        # Use sudo to bind to privileged ports (80/443) for ACME certificate fetching
+        cmd = ["sudo", caddy_path, "run", "--config", "-", "--adapter", "caddyfile"]
+        caddy_process = subprocess.Popen(
+            cmd,
+            stdin=subprocess.PIPE,
+            stderr=subprocess.PIPE,
+        )
+        caddy_process.stdin.write(caddyfile.encode())
+        caddy_process.stdin.close()
+    except Exception as e:
+        stderr.write(f"┃ ⚠️  Caddy couldn't start: {e}\n")
+        return None
+
+    # Helper to parse Caddy log line (JSON or plain text) into (level, logger, msg)
+    def parse_caddy_log(line: str) -> tuple[str, str, str] | None:
+        """Parse a Caddy log line, return (level, logger, msg) or None if unparseable."""
+        line = line.rstrip("\n")
+        if not line:
+            return None
+
+        # Try JSON format first
+        try:
+            log = json.loads(line)
+            return (
+                log.get("level", ""),
+                log.get("logger", ""),
+                log.get("msg", ""),
+            )
+        except json.JSONDecodeError:
+            pass
+
+        # Plain text format: "2025/12/06 22:59:41.390 INFO    logger    msg..."
+        # or "2025/12/06 22:59:41.390 INFO    msg..." (no logger)
+        parts = line.split("\t")
+        if len(parts) >= 2:
+            # First part is "timestamp LEVEL", rest are logger and/or message
+            first = parts[0].rsplit(None, 1)  # split off the level from timestamp
+            if len(first) == 2:
+                level = first[1].lower()
+                if len(parts) == 2:
+                    return (level, "", parts[1])
+                else:
+                    return (level, parts[1], "\t".join(parts[2:]))
+
+        # Unparseable - return as-is with no level/logger
+        return ("", "", line)
+
+    def strip_caddy_verbose(msg: str) -> str:
+        """Remove verbose prefixes from Caddy error messages."""
+        return msg.replace("loading initial config: loading new config: ", "")
+
+    def format_caddy_log(level: str, logger: str, msg: str) -> str:
+        """Format a parsed Caddy log for display."""
+        msg = strip_caddy_verbose(msg)
+        if logger:
+            return f"┃ [{level.upper()}] {logger}: {msg}\n"
+        else:
+            return f"┃ [{level.upper()}] {msg}\n"
+
+    # Read stderr line by line until Caddy signals it's ready or exits
+    # Caddy outputs logs; "serving initial configuration" means it's ready
+    while True:
+        exit_code = caddy_process.poll()
+        if exit_code is not None:
+            # Process exited - read remaining stderr and report failure
+            remaining = (
+                caddy_process.stderr.read().decode() if caddy_process.stderr else ""
+            )
+            if remaining:
+                for line in remaining.splitlines():
+                    if line:
+                        parsed = parse_caddy_log(line)
+                        if parsed:
+                            level, logger, msg = parsed
+                            if level:
+                                stderr.write(format_caddy_log(level, logger, msg))
+                            else:
+                                stderr.write(f"┃ {strip_caddy_verbose(msg)}\n")
+                        else:
+                            stderr.write(f"┃ {strip_caddy_verbose(line)}\n")
+            stderr.write(f"┃ ⚠️  Caddy startup failed (exit code {exit_code})\n")
+            return None
+
+        # Read one line from stderr (blocks until data available)
+        line = caddy_process.stderr.readline().decode()
+        if not line:
+            continue
+
+        # Check for ready signal
+        if "serving initial configuration" in line:
+            break
+
+        parsed = parse_caddy_log(line)
+        if not parsed:
+            continue
+
+        level, logger, msg = parsed
+
+        # Filter out info-level and admin messages
+        if level == "info" or logger == "admin":
+            continue
+
+        # Show errors/fatal to user
+        if level in ("error", "fatal"):
+            stderr.write(format_caddy_log(level, logger, msg))
+        elif not level:
+            # Unparseable non-empty line (e.g., sudo prompt) - pass through with prefix
+            stderr.write(f"┃ {strip_caddy_verbose(msg)}\n")
+            stderr.flush()
+
+    # Start a background thread to drain stderr and show errors
+    def drain_stderr():
+        while True:
+            line = caddy_process.stderr.readline().decode()
+            if not line:
+                break
+
+            parsed = parse_caddy_log(line)
+            if not parsed:
+                continue
+
+            level, logger, msg = parsed
+
+            # Filter out info-level and admin messages
+            if level == "info" or logger == "admin":
+                continue
+
+            # Show errors/warnings to user
+            if level in ("error", "fatal", "warn"):
+                stderr.write(format_caddy_log(level, logger, msg))
+            elif not level:
+                # Unparseable line - pass through with prefix
+                stderr.write(f"┃ {strip_caddy_verbose(msg)}\n")
+
+    drain_thread = Thread(target=drain_stderr, daemon=True)
+    drain_thread.start()
+
+    def cleanup():
+        if caddy_process:
+            caddy_process.terminate()
+            caddy_process.wait()
+
+    atexit.register(cleanup)
+
+    return caddy_process
+
+
+def main():
+    # Parse optional hostport argument for Vite frontend
+    parser = argparse.ArgumentParser(add_help=False)
+    parser.add_argument("hostport", nargs="?", default=None)
+    parser.add_argument("--caddy", action="store_true", help="Run Caddy as HTTPS proxy")
+    parser.add_argument("--rp-id", default="localhost", help="Relying Party ID")
+    parser.add_argument(
+        "--origin", action="append", dest="origins", help="Allowed origin(s)"
+    )
+    parser.add_argument("--auth-host", help="Dedicated auth host")
+    args, remaining = parser.parse_known_args()
+
+    # Parse Vite endpoint
+    vite_host, vite_port, vite_uds, all_ifaces = parse_endpoint(
+        args.hostport, DEFAULT_VITE_PORT
+    )
+
+    if vite_uds:
+        raise SystemExit("┃ ⚠️  Unix sockets are not supported for Vite frontend")
+
+    # Handle all-interfaces case (:port syntax)
+    # Vite uses 0.0.0.0 to listen on all interfaces (IPv4 only, sufficient for dev)
+    if all_ifaces:
+        vite_host = "0.0.0.0"
+
+    # Build Vite URL for PASKIA_DEVMODE (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:
+        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:
+        if not caddy_origins:
+            caddy_origins = [f"https://{args.rp_id}"]
+        stderr.write(f">>> sudo caddy @ {' '.join(caddy_origins)}\n")
+        if not run_caddy(caddy_origins, vite_port):
+            raise SystemExit(1)
+
+    # Start Vite dev server
+    run_vite(vite_url, vite_host, vite_port, args.auth_host)
+
+    # Set dev mode with Vite URL in environment for subprocess
+    env = os.environ.copy()
+    env["PASKIA_DEVMODE"] = vite_url
+
+    # Build command with origin args
+    cmd = ["paskia", "serve", f"localhost:{BACKEND_PORT}"]
+
+    # Pass through rp-id (always pass, has default)
+    cmd.extend(["--rp-id", args.rp_id])
+
+    # Pass through auth-host if specified
+    if args.auth_host:
+        cmd.extend(["--auth-host", args.auth_host])
+
+    # Pass through origins as specified
+    if args.origins:
+        for origin in args.origins:
+            cmd.extend(["--origin", origin])
+
+    # Add remaining args (ones we didn't parse)
+    cmd.extend(remaining)
+
+    stderr.write(f">>> (devmode) {' '.join(cmd)}\n")
+    subprocess.run(cmd, env=env)
+
+
+if __name__ == "__main__":
+    main()