feat: review and revoke active devices (#325)

frontend/dashboard.css

@@ -11,6 +11,16 @@ header { position: sticky; top: 0; z-index: 20; padding: 12px 16px; display:flex
 .app-menu-panel { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
 button { background: linear-gradient(180deg,#1f3a5f,#15324d); border:1px solid #2a496e; color:#e5e7eb; padding:8px 12px; border-radius:10px; cursor:pointer; }
 #sign-out-all { min-height:44px; }
+.active-devices-sheet { position:fixed; inset:0; z-index:80; display:flex; justify-content:flex-end; background:rgba(5,12,21,.72); backdrop-filter:blur(4px); }
+.active-devices-sheet[hidden] { display:none; }
+.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-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; }
 button:hover { filter: brightness(1.15); }
 .panel { border: 1px solid #1b2d45; border-radius: 14px; padding: 12px; background: rgba(11,21,38,.92); }
 .panel > summary { cursor: pointer; list-style-position: inside; }

frontend/index.html

@@ -18,6 +18,7 @@
     <div class="app-menu-panel">
       <button id="refresh">Refresh</button>
       <button id="open-palette">Command</button>
+      <button id="active-devices" type="button">Active devices</button>
       <button id="sign-out" type="button">Sign out &amp; clear this device</button>
       <button id="sign-out-all" type="button">Sign out all devices</button>
       <span class="small muted" id="clock"></span>
@@ -28,6 +29,17 @@
   Offline · live Gitea data is unavailable. Saved drafts remain available on this device.
 </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">
+    <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>
+    </div>
+    <div id="active-devices-status" class="small" role="status" aria-live="polite"></div>
+    <div id="active-devices-list" class="active-devices-list"></div>
+  </section>
+</div>
+
 <main>
   <section class="panel my-work" id="my-work" tabindex="-1">
     <div class="my-work-header">

frontend/login.js

@@ -51,14 +51,14 @@
     }, 1000);
   }
 
-  async function submit(accessToken) {
+  async function submit(accessToken, deviceLabel = 'This device') {
     status.textContent = 'Signing in…';
     let response;
     try {
       response = await fetchImpl('api/v1/session', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ access_token: accessToken }),
+        body: JSON.stringify({ access_token: accessToken, device_label: deviceLabel }),
       });
     } catch (_error) {
       form.reset();
@@ -96,7 +96,9 @@ if (typeof document !== 'undefined') {
   controller.showReason(loginParams.get('reason'));
   form.addEventListener('submit', event => {
     event.preventDefault();
-    const accessToken = new FormData(form).get('access_token');
-    controller.submit(accessToken);
+    const data = new FormData(form);
+    const accessToken = data.get('access_token');
+    const deviceLabel = data.get('device_label');
+    controller.submit(accessToken, deviceLabel);
   });
 }

frontend/service-worker.js

@@ -1,6 +1,6 @@
 const BASE = new URL('./', self.location.href).pathname;
 importScripts(BASE + 'static/background-issue-sync.js');
-const CACHE = 'stackchain-dashboard-shell-v36';
+const CACHE = 'stackchain-dashboard-shell-v37';
 const OUTAGE_STATUSES = new Set([500, 502, 503, 504]);
 const SHELL = [
   BASE,

frontend/session.js

@@ -28,6 +28,56 @@
       if (button) button.addEventListener('click', () => boundary.signOut());
       const allDevicesButton = root.document.getElementById('sign-out-all');
       if (allDevicesButton) allDevicesButton.addEventListener('click', () => boundary.signOutAllDevices());
+      const devicesButton = root.document.getElementById('active-devices');
+      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 closeDevices = root.document.getElementById('close-active-devices');
+      const renderDevices = async () => {
+        devicesStatus.textContent = 'Loading active devices…';
+        devicesList.replaceChildren();
+        try {
+          const devices = await boundary.listActiveDevices();
+          devices.forEach(device => {
+            const row = root.document.createElement('article');
+            row.className = 'active-device';
+            const details = root.document.createElement('div');
+            const label = root.document.createElement('strong');
+            label.textContent = device.device_label;
+            const timing = root.document.createElement('span');
+            timing.className = 'small muted';
+            timing.textContent = `Signed in ${new Date(device.created_at * 1000).toLocaleString()} · expires ${new Date(device.expires_at * 1000).toLocaleString()}`;
+            details.append(label, timing);
+            if (device.current) {
+              const current = root.document.createElement('span');
+              current.className = 'active-device-current';
+              current.textContent = 'This device';
+              details.append(current);
+            }
+            const revoke = root.document.createElement('button');
+            revoke.type = 'button';
+            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();
+            });
+            row.append(details, revoke);
+            devicesList.append(row);
+          });
+          devicesStatus.textContent = devices.length ? `${devices.length} active device${devices.length === 1 ? '' : 's'}` : 'No active devices.';
+        } catch (_error) {
+          devicesStatus.textContent = 'Active devices could not be loaded. Try again.';
+        }
+      };
+      if (devicesButton && devicesSheet) devicesButton.addEventListener('click', () => {
+        devicesSheet.hidden = false;
+        closeDevices?.focus();
+        renderDevices();
+      });
+      if (closeDevices && devicesSheet) closeDevices.addEventListener('click', () => {
+        devicesSheet.hidden = true;
+        devicesButton?.focus();
+      });
       boundary.resumeQueuedWork();
     };
     if (root.document.readyState === 'loading') root.document.addEventListener('DOMContentLoaded', attach);
@@ -128,6 +178,25 @@
     } catch (_error) { /* A later service-worker activation can clear stale caches. */ }
   }
 
+  async function listActiveDevices() {
+    const response = await sessionFetch(base + 'api/v1/sessions');
+    if (!response.ok) throw new Error('Could not load active devices');
+    const payload = await response.json();
+    return Array.isArray(payload.devices) ? payload.devices : [];
+  }
+
+  async function revokeActiveDevice(device) {
+    if (!device?.management_id || device.current) return false;
+    const confirmed = confirmAction?.(`Sign out ${device.device_label}?`);
+    if (!confirmed) return false;
+    const response = await sessionFetch(
+      base + 'api/v1/sessions/' + encodeURIComponent(device.management_id),
+      { method: 'DELETE' },
+    );
+    if (!response.ok) throw new Error('Could not revoke active device');
+    return true;
+  }
+
   async function signOut() {
     try {
       await sessionFetch(base + 'api/v1/session', { method: 'DELETE' });
@@ -154,5 +223,13 @@
     } catch (_error) { /* Background Sync is optional; foreground delivery remains available. */ }
   }
 
-  return { fetch: sessionFetch, signOut, signOutAllDevices, clearPrivateDeviceData, resumeQueuedWork };
+  return {
+    fetch: sessionFetch,
+    signOut,
+    signOutAllDevices,
+    listActiveDevices,
+    revokeActiveDevice,
+    clearPrivateDeviceData,
+    resumeQueuedWork,
+  };
 });