feat: make Security Center Back-safe on mobile (Closes #1020)

frontend/dashboard.css

@@ -46,6 +46,11 @@ button { background: linear-gradient(180deg,#1f3a5f,#15324d); border:1px solid #
 .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, .enrolled-passkey button { min-height:44px; }
+.security-section-nav { position:sticky; top:-18px; z-index:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 -2px; padding:10px 2px; background:#0b1526; }
+.security-section-nav button { min-height:44px; min-width:0; }
+.security-section-nav button[aria-current="page"] { border-color:#55d6be; color:#55d6be; }
+.security-activity, .security-devices, .enrolled-passkeys { scroll-margin-top:64px; }
+.security-devices { margin-top:24px; padding-top:18px; border-top:1px solid #2a496e; }
 .active-devices-list { display:grid; gap:10px; margin-top:16px; }
 .device-setup-sheet { position:fixed; inset:0; z-index:95; display:flex; align-items:flex-end; justify-content:center; background:rgba(5,12,21,.82); backdrop-filter:blur(4px); }
 .device-setup-sheet[hidden] { display:none; }
@@ -81,6 +86,7 @@ button { background: linear-gradient(180deg,#1f3a5f,#15324d); border:1px solid #
 .security-activity-header h3, .security-activity-header p { margin:0 0 6px; }
 .security-activity-list { display:grid; gap:8px; margin:12px 0; }
 .security-event { padding:12px; border:1px solid #243d5d; border-radius:12px; background:#0d1c30; }
+.security-event button { min-height:44px; margin-top:10px; }
 .authentication-alert { border-color:#d69e2e; background:#241b09; }
 .authentication-alert strong { color:#f6c453; }
 .security-event strong, .security-event span { display:block; overflow-wrap:anywhere; }

frontend/index.html

@@ -48,22 +48,15 @@
 <div id="active-devices-sheet" class="active-devices-sheet" hidden>
   <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>
+      <div><h2>Security Center</h2><p class="small muted">Investigate activity, remove untrusted access, and verify the result.</p></div>
       <button id="close-active-devices" type="button" aria-label="Close active devices">Close</button>
     </div>
-    <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">
+    <nav class="security-section-nav" aria-label="Security Center sections">
+      <button id="security-section-activity" type="button">Activity</button>
+      <button id="security-section-devices" type="button">Devices</button>
+      <button id="security-section-passkeys" type="button">Passkeys</button>
+    </nav>
+    <section id="security-activity-section" class="security-activity" aria-labelledby="security-activity-title">
       <div class="security-activity-header">
         <h3 id="security-activity-title">Security activity</h3>
         <p class="small muted">Recent sign-ins, device changes, and protected actions.</p>
@@ -72,6 +65,24 @@
       <div id="security-activity-list" class="security-activity-list"></div>
       <button id="load-more-security-activity" type="button" hidden>Load older activity</button>
     </section>
+    <section id="security-devices-section" class="security-devices" aria-labelledby="security-devices-title">
+      <div class="security-activity-header">
+        <h3 id="security-devices-title">Active devices</h3>
+        <p class="small muted">Review signed-in devices and remove access you no longer trust.</p>
+      </div>
+      <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>
+    <section id="security-passkeys-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>
 </div>
 

frontend/security-center.js

@@ -12,8 +12,49 @@
   const activityList = root.document.getElementById('security-activity-list');
   const activityStatus = root.document.getElementById('security-activity-status');
   const loadMoreActivity = root.document.getElementById('load-more-security-activity');
+  const sectionButtons = Object.fromEntries(['activity', 'devices', 'passkeys'].map(section => [
+    section, root.document.getElementById(`security-section-${section}`),
+  ]));
+  const sections = Object.fromEntries(['activity', 'devices', 'passkeys'].map(section => [
+    section, root.document.getElementById(`security-${section}-section`),
+  ]));
   let activityCursor = null;
 
+  const navigate = (section, { history = true } = {}) => {
+    if (!sections[section]) section = 'activity';
+    Object.entries(sectionButtons).forEach(([name, button]) => {
+      if (!button) return;
+      if (name === section) button.setAttribute('aria-current', 'page');
+      else button.removeAttribute('aria-current');
+    });
+    sections[section]?.scrollIntoView?.({ block: 'start' });
+    if (history && root.history?.pushState) {
+      root.history.pushState(
+        { ...(root.history.state || {}), stackchainSecuritySection: section },
+        '',
+        `${root.location.pathname}${root.location.search || ''}#security/${section}`,
+      );
+    }
+  };
+
+  Object.entries(sectionButtons).forEach(([section, button]) => {
+    button?.addEventListener('click', () => navigate(section));
+  });
+  root.document.getElementById('close-active-devices')?.addEventListener('click', () => {
+    if (root.history?.state?.stackchainSecuritySection) root.history.back();
+  });
+  root.addEventListener?.('popstate', event => {
+    const section = event.state?.stackchainSecuritySection;
+    if (section && !devicesSheet.hidden) {
+      navigate(section, { history: false });
+      return;
+    }
+    if (!devicesSheet.hidden) {
+      devicesSheet.hidden = true;
+      devicesButton?.focus();
+    }
+  });
+
   const renderDevices = async () => {
     devicesStatus.textContent = 'Loading active devices…';
     devicesList.replaceChildren();
@@ -40,7 +81,9 @@
         revoke.textContent = device.current ? 'Sign out' : 'Revoke';
         revoke.addEventListener('click', async () => {
           if (device.current) await boundary.signOut();
-          else if (await boundary.revokeActiveDevice(device)) await renderDevices();
+          else if (await boundary.revokeActiveDevice(device)) {
+            await Promise.all([renderDevices(), renderSecurityActivity()]);
+          }
         });
         row.append(details, revoke);
         devicesList.append(row);
@@ -82,6 +125,7 @@
                 : 'Passkey removed.';
               await renderPasskeys();
               if (outcome.session_revoked) await renderDevices();
+              await renderSecurityActivity();
             } else {
               remove.disabled = false;
               passkeysStatus.textContent = `${enrolled.length} enrolled passkey${enrolled.length === 1 ? '' : 's'}`;
@@ -122,7 +166,11 @@
           const details = root.document.createElement('span');
           details.className = 'small muted';
           details.textContent = formatted.detail;
-          row.append(title, details);
+          const action = root.document.createElement('button');
+          action.type = 'button';
+          action.textContent = 'Review devices';
+          action.addEventListener('click', () => navigate('devices'));
+          row.append(title, details, action);
           activityList.append(row);
         });
       }
@@ -150,6 +198,13 @@
           .filter(value => typeof value === 'string' && value).join(' · ');
         details.textContent = `${new Date(event.created_at * 1000).toLocaleString()}${context ? ' · ' + context : ''}`;
         row.append(title, details);
+        if (event.kind === 'passkey_counter_anomaly') {
+          const action = root.document.createElement('button');
+          action.type = 'button';
+          action.textContent = 'Review passkeys';
+          action.addEventListener('click', () => navigate('passkeys'));
+          row.append(action);
+        }
         activityList.append(row);
       });
       activityCursor = page.next_cursor;
@@ -169,6 +224,7 @@
     if (!devicesSheet) return;
     devicesSheet.hidden = false;
     root.document.getElementById('close-active-devices')?.focus();
+    navigate('activity', { history: root.history?.state?.stackchainSecuritySection !== 'activity' });
     return Promise.all([renderDevices(), renderPasskeys(), renderSecurityActivity()]);
   };
   devicesButton?.addEventListener('click', open);
@@ -186,5 +242,5 @@
       enrollPasskey.disabled = false;
     }
   });
-  return { open, renderDevices, renderPasskeys, renderSecurityActivity };
+  return { open, navigate, renderDevices, renderPasskeys, renderSecurityActivity };
 });