feat: manage enrolled passkeys (Closes #499)

frontend/dashboard.css

@@ -16,11 +16,16 @@ button { background: linear-gradient(180deg,#1f3a5f,#15324d); border:1px solid #
 .active-devices-panel { box-sizing:border-box; width:min(560px,100%); height:100%; overflow:auto; padding:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); background:#0b1526; border-left:1px solid #2a496e; }
 .active-devices-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
 .active-devices-header h2, .active-devices-header p { margin-top:0; }
-.active-devices-header button, .active-device button { min-height:44px; }
+.active-devices-header button, .active-device button, .enrolled-passkey button { min-height:44px; }
 .active-devices-list { display:grid; gap:10px; margin-top:16px; }
 .active-device { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:12px; border:1px solid #2a496e; border-radius:12px; background:#0f2237; }
 .active-device strong, .active-device span { display:block; overflow-wrap:anywhere; }
 .active-device-current { color:#55d6be; font-weight:700; }
+.enrolled-passkeys { margin-top:24px; padding-top:18px; border-top:1px solid #2a496e; }
+.enrolled-passkeys-header h3, .enrolled-passkeys-header p { margin:0 0 6px; }
+.enrolled-passkeys-list { display:grid; gap:10px; margin-top:12px; }
+.enrolled-passkey { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:12px; border:1px solid #2a496e; border-radius:12px; background:#0f2237; }
+.enrolled-passkey strong, .enrolled-passkey span { display:block; overflow-wrap:anywhere; }
 .security-activity { margin-top:24px; padding-top:18px; border-top:1px solid #2a496e; }
 .security-activity-header h3, .security-activity-header p { margin:0 0 6px; }
 .security-activity-list { display:grid; gap:8px; margin:12px 0; }

frontend/index.html

@@ -30,7 +30,7 @@
 </div>
 
 <div id="active-devices-sheet" class="active-devices-sheet" hidden>
-  <section class="active-devices-panel" role="dialog" aria-modal="true" aria-label="Active devices">
+  <section class="active-devices-panel" role="dialog" aria-modal="true" aria-label="Active devices and passkeys">
     <div class="active-devices-header">
       <div><h2>Active devices</h2><p class="small muted">Review signed-in devices and remove access you no longer trust.</p></div>
       <button id="close-active-devices" type="button" aria-label="Close active devices">Close</button>
@@ -38,6 +38,15 @@
     <div id="active-devices-status" class="small" role="status" aria-live="polite"></div>
     <button id="enroll-passkey" type="button">Add a passkey for this device</button>
     <div id="active-devices-list" class="active-devices-list"></div>
+    <section class="enrolled-passkeys" aria-labelledby="enrolled-passkeys-title">
+      <div class="enrolled-passkeys-header">
+        <h3 id="enrolled-passkeys-title">Enrolled passkeys</h3>
+        <p class="small muted">Passkeys can remain enrolled after a device signs out. Remove credentials you no longer trust.</p>
+        <p class="small muted">A recovery token will be required after sign-out if you remove this device’s passkey.</p>
+      </div>
+      <div id="enrolled-passkeys-status" class="small" role="status" aria-live="polite"></div>
+      <div id="enrolled-passkeys-list" class="enrolled-passkeys-list"></div>
+    </section>
     <section class="security-activity" aria-labelledby="security-activity-title">
       <div class="security-activity-header">
         <h3 id="security-activity-title">Security activity</h3>

frontend/session.js

@@ -38,6 +38,8 @@
       const devicesSheet = root.document.getElementById('active-devices-sheet');
       const devicesList = root.document.getElementById('active-devices-list');
       const devicesStatus = root.document.getElementById('active-devices-status');
+      const passkeysList = root.document.getElementById('enrolled-passkeys-list');
+      const passkeysStatus = root.document.getElementById('enrolled-passkeys-status');
       const closeDevices = root.document.getElementById('close-active-devices');
       const enrollPasskey = root.document.getElementById('enroll-passkey');
       const activityList = root.document.getElementById('security-activity-list');
@@ -80,6 +82,56 @@
           devicesStatus.textContent = 'Active devices could not be loaded. Try again.';
         }
       };
+      const renderPasskeys = async () => {
+        if (!passkeysList || !passkeysStatus) return;
+        passkeysStatus.textContent = 'Loading enrolled passkeys…';
+        passkeysList.replaceChildren();
+        try {
+          const enrolled = await boundary.listPasskeys();
+          enrolled.forEach(passkey => {
+            const row = root.document.createElement('article');
+            row.className = 'enrolled-passkey';
+            const details = root.document.createElement('div');
+            const label = root.document.createElement('strong');
+            label.textContent = passkey.device_label;
+            const timing = root.document.createElement('span');
+            timing.className = 'small muted';
+            const state = passkey.current ? 'This active device' : (passkey.active ? 'Active device' : 'No active session');
+            timing.textContent = `Enrolled ${new Date(passkey.created_at * 1000).toLocaleString()} · ${state}`;
+            details.append(label, timing);
+            const remove = root.document.createElement('button');
+            remove.type = 'button';
+            remove.textContent = 'Remove passkey';
+            remove.addEventListener('click', async () => {
+              remove.disabled = true;
+              passkeysStatus.textContent = `Removing passkey for ${passkey.device_label}…`;
+              try {
+                const outcome = await boundary.revokePasskey(passkey);
+                if (outcome) {
+                  passkeysStatus.textContent = outcome.current_session
+                    ? 'Passkey removed. This session remains active; keep your recovery token available.'
+                    : 'Passkey removed.';
+                  await renderPasskeys();
+                  if (outcome.session_revoked) await renderDevices();
+                } else {
+                  remove.disabled = false;
+                  passkeysStatus.textContent = `${enrolled.length} enrolled passkey${enrolled.length === 1 ? '' : 's'}`;
+                }
+              } catch (_error) {
+                passkeysStatus.textContent = 'Passkey could not be removed. Refresh to verify before retrying.';
+                remove.disabled = false;
+              }
+            });
+            row.append(details, remove);
+            passkeysList.append(row);
+          });
+          passkeysStatus.textContent = enrolled.length
+            ? `${enrolled.length} enrolled passkey${enrolled.length === 1 ? '' : 's'}`
+            : 'No passkeys enrolled.';
+        } catch (_error) {
+          passkeysStatus.textContent = 'Enrolled passkeys could not be loaded. Try again.';
+        }
+      };
       const renderSecurityActivity = async (append = false) => {
         if (!activityList || !activityStatus || !loadMoreActivity) return;
         activityStatus.textContent = append ? 'Loading older activity…' : 'Loading security activity…';
@@ -132,6 +184,7 @@
         devicesSheet.hidden = false;
         closeDevices?.focus();
         renderDevices();
+        renderPasskeys();
         renderSecurityActivity();
       });
       if (closeDevices && devicesSheet) closeDevices.addEventListener('click', () => {
@@ -144,6 +197,7 @@
         try {
           await boundary.enrollPasskey();
           devicesStatus.textContent = 'Passkey enrolled. You can use it at sign-in and authorization prompts.';
+          await renderPasskeys();
         } catch (_error) {
           devicesStatus.textContent = 'Passkey enrollment was not completed. Try again.';
         } finally {
@@ -547,6 +601,27 @@
     return Array.isArray(payload.devices) ? payload.devices : [];
   }
 
+  async function listPasskeys() {
+    const response = await sessionFetch(base + 'api/v1/passkeys');
+    if (!response.ok) throw new Error('Could not load enrolled passkeys');
+    const payload = await response.json();
+    return Array.isArray(payload.passkeys) ? payload.passkeys : [];
+  }
+
+  async function revokePasskey(passkey) {
+    if (!passkey?.management_id) return false;
+    const confirmed = confirmAction?.(
+      `Remove the passkey for ${passkey.device_label}? This cannot be undone.`
+    );
+    if (!confirmed) return false;
+    const response = await sessionFetch(
+      base + 'api/v1/passkeys/' + encodeURIComponent(passkey.management_id),
+      { method: 'DELETE' },
+    );
+    if (!response.ok) throw new Error('Could not remove enrolled passkey');
+    return response.json();
+  }
+
   async function listSecurityEvents(cursor = null) {
     const query = new URLSearchParams({ limit: '25' });
     if (Number.isInteger(cursor) && cursor > 0) query.set('cursor', String(cursor));
@@ -602,9 +677,11 @@
     signOut,
     signOutAllDevices,
     listActiveDevices,
+    listPasskeys,
     listSecurityEvents,
     enrollPasskey,
     revokeActiveDevice,
+    revokePasskey,
     clearPrivateDeviceData,
     handleServiceWorkerMessage,
     refreshOfflineLease,