@nordbyte/nordrelay 0.8.1 → 0.8.3

package/dist/{web-api-contract.js → web/web-api-contract.js}

@@ -9,6 +9,7 @@ export const WEB_API_ROUTE_DEFINITIONS = [
     exact("/api/progress", ["GET"], "inspect"),
     exact("/api/metrics", ["GET"], "inspect"),
     exact("/api/jobs", ["GET"], "inspect"),
+    exact("/api/trace", ["GET"], "sessions.read"),
     dynamic("/api/jobs/:id/log", "^/api/jobs/[^/]+/log$", ["GET"], "inspect", `/api/jobs/${stringToken}/log`),
     dynamic("/api/jobs/:id/action", "^/api/jobs/[^/]+/action$", ["POST"], "inspect", `/api/jobs/${stringToken}/action`),
     exact("/api/active-sessions", ["GET"], "sessions.read"),
@@ -25,8 +26,17 @@ export const WEB_API_ROUTE_DEFINITIONS = [
     exact("/api/peers/invite", ["POST"], "peers.write"),
     exact("/api/peers/pair", ["POST"], "peers.write"),
     exact("/api/peers/probe", ["POST"], "peers.connect"),
+    exact("/api/peers/discover", ["GET"], "peers.connect"),
+    exact("/api/peers/discovery-jobs", ["GET", "POST"], readWrite("peers.connect", "peers.connect")),
+    dynamic("/api/peers/discovery-jobs/:id", "^/api/peers/discovery-jobs/[^/]+$", ["GET"], "peers.connect", `/api/peers/discovery-jobs/${stringToken}`),
+    dynamic("/api/peers/discovery-jobs/:id/cancel", "^/api/peers/discovery-jobs/[^/]+/cancel$", ["POST"], "peers.connect", `/api/peers/discovery-jobs/${stringToken}/cancel`),
+    dynamic("/api/peers/discovery-jobs/:id/log", "^/api/peers/discovery-jobs/[^/]+/log$", ["GET"], "peers.connect", `/api/peers/discovery-jobs/${stringToken}/log`),
+    exact("/api/peers/identity/backup", ["GET"], "peers.write"),
+    exact("/api/peers/identity/restore", ["POST"], "peers.write"),
     exact("/api/peers/global-sessions", ["GET"], "sessions.read"),
     dynamic("/api/peers/invitations/:id", "^/api/peers/invitations/[^/]+$", ["DELETE"], "peers.write", `/api/peers/invitations/${stringToken}`),
+    dynamic("/api/peers/:id/repin", "^/api/peers/[^/]+/repin$", ["POST"], "peers.write", `/api/peers/${stringToken}/repin`),
+    dynamic("/api/peers/:id/rotate", "^/api/peers/[^/]+/rotate$", ["POST"], "peers.write", `/api/peers/${stringToken}/rotate`),
     dynamic("/api/peers/:id/health", "^/api/peers/[^/]+/health$", ["GET"], "peers.connect", `/api/peers/${stringToken}/health`),
     dynamic("/api/peers/:id", "^/api/peers/[^/]+$", ["PATCH", "DELETE"], "peers.write", `/api/peers/${stringToken}`),
     dynamic("/api/peers/:id/proxy", "^/api/peers/[^/]+/proxy$", ["POST"], "peers.connect", `/api/peers/${stringToken}/proxy`),
@@ -79,6 +89,7 @@ export const WEB_API_ROUTE_DEFINITIONS = [
     exact("/api/sync", ["POST"], "sessions.write"),
     exact("/api/queue", ["GET", "POST"], readWrite("queue.read", "queue.write")),
     exact("/api/chat/history", ["GET", "DELETE"], readWrite("sessions.read", "sessions.write")),
+    exact("/api/chat/mirror", ["GET", "POST"], readWrite("sessions.read", "settings.write")),
     exact("/api/activity", ["GET"], "sessions.read"),
     exact("/api/artifacts", ["GET", "DELETE"], readWrite("files.read", "files.write")),
     exact("/api/artifacts/bulk", ["POST"], "files.write"),
@@ -96,11 +107,16 @@ export const WEB_API_STATIC_PATHS = WEB_API_ROUTE_DEFINITIONS
     .map((route) => route.path);
 export const WEB_API_DYNAMIC_TYPE_PATHS = WEB_API_ROUTE_DEFINITIONS
     .flatMap((route) => route.dynamicType ? [route.dynamicType] : []);
+export function routeForWebRequest(method, pathname) {
+    const verb = normalizeMethod(method);
+    const route = WEB_API_ROUTE_DEFINITIONS.find((candidate) => (candidate.pattern ? new RegExp(candidate.pattern).test(pathname) : candidate.path === pathname));
+    const methods = route?.methods ?? [];
+    return route && methods.includes(verb) ? route : null;
+}
 export function permissionForWebRequestFromContract(method, pathname) {
     const verb = normalizeMethod(method);
-    const rule = WEB_API_ROUTE_DEFINITIONS.find((candidate) => (candidate.pattern ? new RegExp(candidate.pattern).test(pathname) : candidate.path === pathname));
-    const methods = rule?.methods ?? [];
-    if (!rule || !methods.includes(verb)) {
+    const rule = routeForWebRequest(verb, pathname);
+    if (!rule) {
         return null;
     }
     return resolvePermission(rule.permissions, verb);

package/dist/web/web-api-types.js

@@ -0,0 +1 @@
+export {};

package/dist/{web-dashboard-access-routes.js → web/web-dashboard-access-routes.js}

@@ -1,5 +1,5 @@
-import { ALL_PERMISSIONS } from "./access-control.js";
-import { publicUser, publicUserSnapshot, } from "./user-management.js";
+import { ALL_PERMISSIONS } from "../access/access-control.js";
+import { publicUser, publicUserSnapshot, } from "../access/user-management.js";
 import { arrayNumberField, arrayStringField, numberField, numberParam, optionalBooleanField, optionalNumberField, optionalStringField, readJsonBody, sendJson, stringField, } from "./web-dashboard-http.js";
 export async function handleDashboardAccessRoute(req, res, url, options) {
     const { users, runtime, authUser } = options;
@@ -278,19 +278,22 @@ export async function handleDashboardAccessRoute(req, res, url, options) {
         return true;
     }
     if (req.method === "GET" && url.pathname === "/api/audit") {
+        const page = runtime.auditPage({
+            limit: numberParam(url, "limit", 50),
+            cursor: url.searchParams.get("cursor") || undefined,
+            channelId: (url.searchParams.get("channel") || "all"),
+            category: (url.searchParams.get("category") || "all"),
+            status: (url.searchParams.get("status") || "all"),
+            action: url.searchParams.get("action") || "all",
+            actor: url.searchParams.get("actor") || undefined,
+            agentId: url.searchParams.get("agent") || "all",
+            threadId: url.searchParams.get("thread") || undefined,
+            workspace: url.searchParams.get("workspace") || undefined,
+            since: url.searchParams.get("since") || undefined,
+        });
         sendJson(res, 200, {
-            events: runtime.audit({
-                limit: numberParam(url, "limit", 50),
-                channelId: (url.searchParams.get("channel") || "all"),
-                category: (url.searchParams.get("category") || "all"),
-                status: (url.searchParams.get("status") || "all"),
-                action: url.searchParams.get("action") || "all",
-                actor: url.searchParams.get("actor") || undefined,
-                agentId: url.searchParams.get("agent") || "all",
-                threadId: url.searchParams.get("thread") || undefined,
-                workspace: url.searchParams.get("workspace") || undefined,
-                since: url.searchParams.get("since") || undefined,
-            }),
+            events: page.items,
+            pagination: page.pagination,
         });
         return true;
     }

package/dist/{web-dashboard-artifact-routes.js → web/web-dashboard-artifact-routes.js}

@@ -1,9 +1,13 @@
-import { readJsonBody, requiredSearch, sendFile, sendJson, stringField, } from "./web-dashboard-http.js";
+import { cursorPage, normalizeCursorLimit } from "../core/pagination.js";
+import { numberParam, readJsonBody, requiredSearch, sendFile, sendJson, stringField, } from "./web-dashboard-http.js";
 export async function handleDashboardArtifactRoute(req, res, url, options) {
     const { runtime, authUser } = options;
     if (req.method === "GET" && url.pathname === "/api/artifacts") {
         await options.assertCurrentSessionScope(authUser);
-        sendJson(res, 200, { reports: await runtime.artifacts() });
+        const limit = normalizeCursorLimit(numberParam(url, "limit", 50), 50, 200);
+        const reports = await runtime.artifacts(500);
+        const page = cursorPage(reports, url.searchParams.get("cursor") || undefined, limit, (report) => report.turnId);
+        sendJson(res, 200, { reports: page.items, pagination: page.pagination });
         return true;
     }
     if (req.method === "DELETE" && url.pathname === "/api/artifacts") {

package/dist/{web-dashboard-assets.js → web/web-dashboard-assets.js}

@@ -6,12 +6,14 @@ const clientSources = [
     "client/core/api-routes.generated.js",
     "client/core/api-client.js",
     "client/core/runtime.js",
+    "client/core/components.js",
     "client/overview.js",
     "client/events.js",
     "client/workflows.js",
     "client/jobs.js",
     "client/metrics.js",
     "client/admin.js",
+    "client/users.js",
     "client/settings-wizard.js",
 ];
 const styleSources = [
@@ -26,13 +28,34 @@ export function dashboardJs() {
 export function dashboardCss() {
     return readDashboardAsset("dashboard.css", styleSources);
 }
+const staticAssetTypes = {
+    "favicon.ico": "image/x-icon",
+    "favicon.png": "image/png",
+    "logo.png": "image/png",
+};
+export function dashboardStaticAsset(assetName) {
+    const contentType = staticAssetTypes[assetName];
+    if (!contentType) {
+        return null;
+    }
+    const filePath = dashboardStaticAssetPath(assetName);
+    return filePath ? { filePath, contentType } : null;
+}
 function readDashboardAsset(assetName, sourceFiles) {
-    const builtAsset = path.join(moduleDir, "webui-assets", assetName);
+    const builtAsset = path.resolve(moduleDir, "..", "webui-assets", assetName);
     if (existsSync(builtAsset)) {
         return readFileSync(builtAsset, "utf8");
     }
-    const sourceDir = path.join(moduleDir, "webui");
+    const sourceDir = path.join(moduleDir, "ui");
     return sourceFiles
         .map((file) => readFileSync(path.join(sourceDir, file), "utf8"))
         .join("\n");
 }
+function dashboardStaticAssetPath(assetName) {
+    const builtAsset = path.resolve(moduleDir, "..", "webui-assets", assetName);
+    if (existsSync(builtAsset)) {
+        return builtAsset;
+    }
+    const sourceAsset = path.join(moduleDir, "ui", "assets", assetName);
+    return existsSync(sourceAsset) ? sourceAsset : null;
+}

package/dist/{web-dashboard-http.js → web/web-dashboard-http.js}

@@ -1,5 +1,12 @@
 import { createReadStream } from "node:fs";
-const JSON_HEADERS = { "content-type": "application/json; charset=utf-8", "cache-control": "no-store" };
+const DEFAULT_JSON_BODY_LIMIT = 64 * 1024 * 1024;
+const BASE_SECURITY_HEADERS = {
+    "x-content-type-options": "nosniff",
+    "x-frame-options": "DENY",
+    "referrer-policy": "no-referrer",
+    "permissions-policy": "camera=(), microphone=(), geolocation=()",
+};
+const JSON_HEADERS = { ...webSecurityHeaders(), "content-type": "application/json; charset=utf-8", "cache-control": "no-store" };
 export function parseCookies(cookieHeader) {
     const cookies = {};
     for (const part of cookieHeader.split(";")) {
@@ -9,10 +16,22 @@ export function parseCookies(cookieHeader) {
     }
     return cookies;
 }
-export async function readJsonBody(req) {
+export class RequestBodyTooLargeError extends Error {
+    statusCode = 413;
+}
+export function isRequestBodyTooLargeError(error) {
+    return error instanceof RequestBodyTooLargeError;
+}
+export async function readJsonBody(req, maxBytes = DEFAULT_JSON_BODY_LIMIT) {
     const chunks = [];
+    let size = 0;
     for await (const chunk of req) {
-        chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
+        const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);
+        size += buffer.length;
+        if (size > maxBytes) {
+            throw new RequestBodyTooLargeError(`Request body is too large. Max ${Math.round(maxBytes / 1024 / 1024)} MB.`);
+        }
+        chunks.push(buffer);
     }
     const text = Buffer.concat(chunks).toString("utf8").trim();
     if (!text) {
@@ -24,17 +43,26 @@ export function sendJson(res, status, value) {
     res.writeHead(status, JSON_HEADERS);
     res.end(`${JSON.stringify(value)}\n`);
 }
-export function sendText(res, status, text, contentType) {
-    res.writeHead(status, { "content-type": contentType, "cache-control": "no-store" });
+export function sendText(res, status, text, contentType, options = {}) {
+    res.writeHead(status, { ...webSecurityHeaders(options.cspNonce), "content-type": contentType, "cache-control": "no-store" });
     res.end(text);
 }
 export function sendFile(res, filePath, filename) {
     res.writeHead(200, {
+        ...webSecurityHeaders(),
         "content-type": "application/octet-stream",
         "content-disposition": `attachment; filename="${filename.replace(/"/g, "")}"`,
     });
     createReadStream(filePath).pipe(res);
 }
+export function sendStaticFile(res, filePath, contentType) {
+    res.writeHead(200, {
+        ...webSecurityHeaders(),
+        "content-type": contentType,
+        "cache-control": "public, max-age=86400",
+    });
+    createReadStream(filePath).pipe(res);
+}
 export function stringField(value, key) {
     const field = value[key];
     if (typeof field !== "string" || !field.trim()) {
@@ -141,3 +169,11 @@ function stripDataUrlPrefix(value) {
     const comma = value.indexOf(",");
     return value.startsWith("data:") && comma !== -1 ? value.slice(comma + 1) : value;
 }
+export function webSecurityHeaders(cspNonce) {
+    const scriptSrc = cspNonce ? `'self' 'nonce-${cspNonce}'` : "'self'";
+    const styleSrc = cspNonce ? `'self' 'nonce-${cspNonce}'` : "'self'";
+    return {
+        ...BASE_SECURITY_HEADERS,
+        "content-security-policy": `default-src 'self'; script-src ${scriptSrc}; style-src ${styleSrc}; connect-src 'self'; img-src 'self' data:; font-src 'self'; object-src 'none'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'`,
+    };
+}

package/dist/{web-dashboard-pages.js → web/web-dashboard-pages.js}

@@ -1,12 +1,18 @@
 import { renderDashboardNav } from "./web-dashboard-ui.js";
+const faviconLinks = `
+  <link rel="icon" href="/favicon.ico" sizes="any">
+  <link rel="icon" type="image/png" href="/assets/favicon.png">
+  <link rel="apple-touch-icon" href="/assets/logo.png">`;
 export function renderLoginPage(options) {
+    const nonce = nonceAttr(options.cspNonce);
     return `<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>NordRelay Login</title>
-  <style>
+${faviconLinks}
+  <style${nonce}>
     body{margin:0;min-height:100vh;display:grid;place-items:center;background:#f4f5f2;color:#181c19;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
     form{width:min(420px,calc(100vw - 32px));background:white;border:1px solid #dfe3dc;border-radius:8px;padding:24px;box-shadow:0 20px 60px rgba(20,30,24,.08)}
     h1{font-size:24px;margin:0 0 8px}
@@ -26,7 +32,7 @@ export function renderLoginPage(options) {
     <button ${options.adminConfigured ? "" : "disabled"}>Sign in</button>
     <div class="error" id="error"></div>
   </form>
-  <script>
+  <script${nonce}>
     document.getElementById('login').addEventListener('submit', async (event) => {
       event.preventDefault();
       const payload = {
@@ -45,13 +51,15 @@ export function renderLoginPage(options) {
 </html>`;
 }
 export function renderFirstRunSetupPage(options) {
+    const nonce = nonceAttr(options.cspNonce);
     return `<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>NordRelay First Run</title>
-  <style>
+${faviconLinks}
+  <style${nonce}>
     body{margin:0;min-height:100vh;display:grid;place-items:center;background:#f4f5f2;color:#181c19;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
     form{width:min(460px,calc(100vw - 32px));background:white;border:1px solid #dfe3dc;border-radius:8px;padding:24px;box-shadow:0 20px 60px rgba(20,30,24,.08)}
     h1{font-size:24px;margin:0 0 8px}
@@ -75,7 +83,7 @@ export function renderFirstRunSetupPage(options) {
     <button>Create admin</button>
     <div class="error" id="error"></div>
   </form>
-  <script>
+  <script${nonce}>
     document.getElementById('setup').addEventListener('submit', async (event) => {
       event.preventDefault();
       const payload = {
@@ -96,20 +104,23 @@ export function renderFirstRunSetupPage(options) {
 </body>
 </html>`;
 }
-export function renderDashboardApp() {
+export function renderDashboardApp(options = {}) {
+    const nonce = nonceAttr(options.cspNonce);
     return `<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>NordRelay Dashboard</title>
-  <script>document.documentElement.dataset.theme = localStorage.getItem('nordrelayTheme') || 'light';</script>
+${faviconLinks}
+  <script${nonce}>document.documentElement.dataset.theme = localStorage.getItem('nordrelayTheme') || 'light';</script>
   <link rel="stylesheet" href="/assets/dashboard.css">
 </head>
 <body>
   <div class="app">
     <aside class="sidebar" id="sidebar">
-      <div class="brand"><span class="mark">NR</span><div><strong>NordRelay</strong><small>Remote control</small></div></div>
+      <div class="brand"><img class="brand-mark" src="/assets/logo.png" alt="" width="44" height="44" aria-hidden="true"><div><strong>NordRelay</strong><small>Remote control</small></div></div>
+      <div class="brand-separator" aria-hidden="true"></div>
       <nav>
         ${renderDashboardNav()}
       </nav>
@@ -126,7 +137,6 @@ export function renderDashboardApp() {
           <select id="peerSelect" title="NordRelay target"></select>
           <select id="agentSelect"></select>
           <button id="themeBtn" class="secondary" title="Toggle dark theme">Dark</button>
-          <button id="refreshBtn">Refresh</button>
           <button id="logoutBtn" class="secondary">Logout</button>
         </div>
       </header>
@@ -143,7 +153,7 @@ export function renderDashboardApp() {
       </section>
 
       <section class="page" id="page-chat">
-        <div class="chat-layout">
+        <div class="chat-layout tools-hidden" id="chatLayout">
           <div class="panel chat-panel">
             <div class="chat-toolbar">
               <button id="newSessionBtn">New session</button>
@@ -151,9 +161,19 @@ export function renderDashboardApp() {
               <button id="editLastBtn" class="secondary">Edit last</button>
               <button id="syncBtn" class="secondary">Sync</button>
               <button id="notifyBtn" class="secondary">Notify</button>
+              <label class="mirror-control" title="Mirror local CLI activity into this WebUI chat">
+                Mirror
+                <select id="mirrorModeSelect">
+                  <option value="off">Off</option>
+                  <option value="status">Status</option>
+                  <option value="final">Final</option>
+                  <option value="full">Full</option>
+                </select>
+              </label>
               <button id="clearChatBtn" class="secondary">Clear history</button>
               <button id="abortBtn">Abort</button>
               <button id="handbackBtn">Handback</button>
+              <button id="toggleToolsBtn" class="secondary" type="button" aria-controls="toolPanel" aria-expanded="false">Show Tools</button>
             </div>
             <div class="control-grid" id="sessionControls"></div>
             <div id="messages" class="messages"></div>
@@ -171,7 +191,7 @@ export function renderDashboardApp() {
               <button>Send</button>
             </form>
           </div>
-          <div class="panel side-panel"><h2>Tools / Plan</h2><div id="toolStream" class="tool-stream"></div></div>
+          <div class="panel side-panel" id="toolPanel" hidden><h2>Tools / Plan</h2><div id="toolStream" class="tool-stream"></div></div>
         </div>
       </section>
 
@@ -179,6 +199,7 @@ export function renderDashboardApp() {
         <div class="panel">
           <div class="row"><button id="reloadTasksBtn">Reload tasks</button></div>
           <div id="tasksList" class="list"></div>
+          <div id="jobsPager" class="pager"></div>
         </div>
       </section>
 
@@ -211,6 +232,14 @@ export function renderDashboardApp() {
         <div class="panel">
           <div class="row"><select id="activitySource"><option value="all">All sources</option><option value="web">Web</option><option value="telegram">Telegram</option><option value="discord">Discord</option><option value="slack">Slack</option><option value="cli">CLI</option></select><select id="activityCategory"><option value="all">All categories</option><option value="prompt">Prompt</option><option value="session">Session</option><option value="queue">Queue</option><option value="agent-update">Agent update</option><option value="artifact">Artifact</option><option value="system">System</option><option value="auth">Auth</option><option value="security">Security</option><option value="tool">Tool</option></select><select id="activityStatus"><option value="all">All statuses</option><option value="queued">Queued</option><option value="running">Running</option><option value="completed">Completed</option><option value="failed">Failed</option><option value="aborted">Aborted</option><option value="info">Info</option></select><input id="activityActor" placeholder="Actor"><input id="activityAgent" placeholder="Agent"><input id="activityThread" placeholder="Thread ID"><input id="activityWorkspace" placeholder="Workspace"><input id="activityType" placeholder="Type"><input id="activitySince" type="datetime-local"><input id="activityLimit" type="number" value="100" min="1" max="500"><button id="loadActivityBtn">Load activity</button><button id="exportActivityBtn" class="secondary">Export</button></div>
           <div id="activityList" class="list"></div>
+          <div id="activityPager" class="pager"></div>
+        </div>
+      </section>
+
+      <section class="page" id="page-trace">
+        <div class="panel">
+          <div class="row"><input id="traceCorrelationId" placeholder="Correlation ID"><button id="loadTraceBtn">Load trace</button></div>
+          <div id="traceDetail" class="list"></div>
         </div>
       </section>
 
@@ -219,6 +248,7 @@ export function renderDashboardApp() {
           <div class="row"><button id="reloadArtifactsBtn">Reload artifacts</button><input id="artifactSearch" placeholder="Search artifacts"><select id="artifactKind"><option value="all">All files</option><option value="images">Images</option><option value="docs">Docs/code</option></select><button id="zipSelectedArtifactsBtn" class="secondary">ZIP selected</button><button id="deleteSelectedArtifactsBtn" class="danger">Delete selected</button></div>
           <div id="artifactPreview" class="preview"></div>
           <div id="artifactList" class="list"></div>
+          <div id="artifactPager" class="pager"></div>
         </div>
       </section>
 
@@ -233,10 +263,13 @@ export function renderDashboardApp() {
 
       <section class="page" id="page-peers">
         <div class="panel">
-          <div class="row"><button id="loadPeersBtn">Reload peers</button><button id="createPeerInviteBtn">Create invite</button><button id="addPeerBtn" class="secondary">Add peer</button></div>
+          <div class="row"><button id="loadPeersBtn">Reload peers</button><button id="createPeerInviteBtn">Create invite</button><button id="addPeerBtn" class="secondary">Add peer</button><button id="discoverPeersBtn" class="secondary">Discover LAN peers</button><button id="cancelPeerDiscoveryBtn" class="secondary">Cancel discovery</button><button id="exportPeerIdentityBtn" class="secondary">Export identity</button><button id="restorePeerIdentityBtn" class="secondary">Restore identity</button></div>
+          <div class="row"><input id="peerDiscoveryTargets" placeholder="Optional targets: 192.168.178.0/24, 192.168.178.10-50, host.local, https://host:31979"><input id="peerDiscoveryMaxHosts" type="number" min="1" max="65536" value="512" title="Max hosts"><input id="peerDiscoveryConcurrency" type="number" min="1" max="128" value="32" title="Concurrency"></div>
           <div id="peerStatus" class="list"></div>
           <h2>Configured peers</h2>
           <div id="peersList" class="list"></div>
+          <h2>LAN discovery</h2>
+          <div id="peerDiscovery" class="list"></div>
           <h2>Open invitations</h2>
           <div id="peerInvites" class="list"></div>
         </div>
@@ -244,49 +277,71 @@ export function renderDashboardApp() {
 
       <section class="page" id="page-access">
         <div class="panel">
-          <div class="row"><button id="loadAccessBtn">Reload users</button><button id="createUserBtn">Create user</button><button id="createGroupBtn" class="secondary">Create group</button><button id="createChatBtn" class="secondary">Add Telegram chat</button><button id="createDiscordChannelBtn" class="secondary">Add Discord channel</button><button id="createSlackChannelBtn" class="secondary">Add Slack channel</button><button id="lockSessionBtn" class="secondary">Lock web session</button><button id="unlockSessionBtn" class="secondary">Unlock web session</button></div>
-          <div id="accessTabs" class="tabs access-tabs">
-            <button type="button" data-access-tab="users" class="active">Users</button>
-            <button type="button" data-access-tab="groups">Groups</button>
-            <button type="button" data-access-tab="telegram">Telegram</button>
-            <button type="button" data-access-tab="discord">Discord</button>
-            <button type="button" data-access-tab="slack">Slack</button>
-            <button type="button" data-access-tab="locks">Locks</button>
-            <button type="button" data-access-tab="audit">Audit</button>
+          <div class="section-header access-section-header">
+            <div id="accessTabs" class="section-tabs access-tabs" role="tablist" aria-label="Users sections">
+              <button type="button" role="tab" aria-selected="true" tabindex="0" data-access-tab="users" class="active">Users</button>
+              <button type="button" role="tab" aria-selected="false" tabindex="-1" data-access-tab="groups">Groups</button>
+              <button type="button" role="tab" aria-selected="false" tabindex="-1" data-access-tab="telegram">Telegram</button>
+              <button type="button" role="tab" aria-selected="false" tabindex="-1" data-access-tab="discord">Discord</button>
+              <button type="button" role="tab" aria-selected="false" tabindex="-1" data-access-tab="slack">Slack</button>
+              <button type="button" role="tab" aria-selected="false" tabindex="-1" data-access-tab="locks">Locks</button>
+              <button type="button" role="tab" aria-selected="false" tabindex="-1" data-access-tab="audit">Audit</button>
+            </div>
           </div>
           <div class="access-tab active" data-access-tab-panel="users">
-            <div id="accessPanel" class="settings-grid"></div>
+            <div class="access-tab-heading">
+              <div class="row access-heading-actions"><button id="loadAccessBtn" class="secondary">Reload</button><button id="createUserBtn">Create user</button></div>
+              <div class="access-filter-row">
+                <input id="userSearch" placeholder="Search users">
+                <select id="userStatusFilter"><option value="all">All statuses</option><option value="active">Active</option><option value="disabled">Disabled</option></select>
+                <select id="userGroupFilter"><option value="all">All groups</option></select>
+                <select id="userIdentityFilter"><option value="all">All identities</option><option value="telegram">Telegram linked</option><option value="discord">Discord linked</option><option value="slack">Slack linked</option><option value="web">Web sessions</option><option value="unlinked">No chat identity</option></select>
+              </div>
+            </div>
+            <div id="accessPanel" class="list user-list"></div>
+            <div id="usersPager" class="pager"></div>
           </div>
           <div class="access-tab" data-access-tab-panel="groups">
-            <h2>Groups</h2>
+            <div class="access-tab-heading">
+              <div class="row access-heading-actions"><button id="createGroupBtn" class="secondary">Create group</button></div>
+              <div class="access-filter-row"><input id="groupSearch" placeholder="Search groups"></div>
+            </div>
             <div id="groupsList" class="list"></div>
           </div>
           <div class="access-tab" data-access-tab-panel="telegram">
-            <h2>Telegram chats</h2>
+            <div class="access-tab-heading">
+              <div class="row access-heading-actions"><button id="createChatBtn" class="secondary">Add Telegram chat</button></div>
+              <input id="telegramChatSearch" placeholder="Search Telegram chats">
+            </div>
             <div id="telegramChatsList" class="list"></div>
           </div>
           <div class="access-tab" data-access-tab-panel="discord">
             <div class="access-tab-heading">
-              <h2>Discord channels</h2>
+              <div class="row access-heading-actions"><button id="createDiscordChannelBtn" class="secondary">Add Discord channel</button></div>
               <input id="discordChannelSearch" placeholder="Search Discord channels">
             </div>
             <div id="discordChannelsList" class="list"></div>
           </div>
           <div class="access-tab" data-access-tab-panel="slack">
             <div class="access-tab-heading">
-              <h2>Slack channels</h2>
+              <div class="row access-heading-actions"><button id="createSlackChannelBtn" class="secondary">Add Slack channel</button></div>
               <input id="slackChannelSearch" placeholder="Search Slack channels">
             </div>
             <div id="slackChannelsList" class="list"></div>
           </div>
           <div class="access-tab" data-access-tab-panel="locks">
-            <h2>Locks</h2>
+            <div class="access-tab-heading">
+              <div class="row access-heading-actions"><button id="lockSessionBtn" class="secondary">Lock web session</button><button id="unlockSessionBtn" class="secondary">Unlock web session</button></div>
+            </div>
             <div id="locksList" class="list"></div>
           </div>
           <div class="access-tab" data-access-tab-panel="audit">
-            <h2>Audit</h2>
-            <div class="row"><select id="auditChannel"><option value="all">All channels</option><option value="web">Web</option><option value="telegram">Telegram</option><option value="discord">Discord</option><option value="slack">Slack</option></select><select id="auditCategory"><option value="all">All categories</option><option value="prompt">Prompt</option><option value="session">Session</option><option value="queue">Queue</option><option value="agent-update">Agent update</option><option value="artifact">Artifact</option><option value="system">System</option><option value="auth">Auth</option><option value="security">Security</option><option value="tool">Tool</option></select><select id="auditStatus"><option value="all">All statuses</option><option value="ok">OK</option><option value="failed">Failed</option><option value="denied">Denied</option></select><input id="auditActor" placeholder="Actor"><input id="auditAgent" placeholder="Agent"><input id="auditThread" placeholder="Thread ID"><input id="auditWorkspace" placeholder="Workspace"><input id="auditSince" type="datetime-local"><input id="auditLimit" type="number" value="50" min="1" max="500"><button id="loadAuditBtn">Load audit</button><button id="exportAuditBtn" class="secondary">Export</button></div>
+            <div class="access-tab-heading">
+              <div class="row access-heading-actions"><button id="loadAuditBtn">Load audit</button><button id="exportAuditBtn" class="secondary">Export</button></div>
+            </div>
+            <div class="row audit-filter-row"><select id="auditChannel"><option value="all">All channels</option><option value="web">Web</option><option value="telegram">Telegram</option><option value="discord">Discord</option><option value="slack">Slack</option></select><select id="auditCategory"><option value="all">All categories</option><option value="prompt">Prompt</option><option value="session">Session</option><option value="queue">Queue</option><option value="agent-update">Agent update</option><option value="artifact">Artifact</option><option value="system">System</option><option value="auth">Auth</option><option value="security">Security</option><option value="tool">Tool</option></select><select id="auditStatus"><option value="all">All statuses</option><option value="ok">OK</option><option value="failed">Failed</option><option value="denied">Denied</option></select><input id="auditActor" placeholder="Actor"><input id="auditAgent" placeholder="Agent"><input id="auditThread" placeholder="Thread ID"><input id="auditWorkspace" placeholder="Workspace"><input id="auditSince" type="datetime-local"><input id="auditLimit" type="number" value="50" min="1" max="500"></div>
             <div id="auditList" class="list"></div>
+            <div id="auditPager" class="pager"></div>
           </div>
         </div>
       </section>
@@ -302,8 +357,11 @@ export function renderDashboardApp() {
 
       <section class="page" id="page-settings">
         <div class="panel">
-          <div class="row"><button id="saveSettingsBtn">Save settings</button><button id="settingsWizardBtn" class="secondary">Setup wizard</button><button id="restartBtn" class="secondary">Restart NordRelay</button><span id="settingsStatus"></span></div>
-          <div id="settingsTabs" class="tabs"></div>
+          <div id="settingsTabHeader" class="section-header settings-section-header">
+            <div id="settingsTabs" class="section-tabs settings-tabs" role="tablist" aria-label="Settings sections"></div>
+          </div>
+          <div id="settingsSubnav" class="settings-subnav" hidden></div>
+          <div id="settingsActions" class="row settings-actions"><button id="saveSettingsBtn">Save settings</button><button id="settingsWizardBtn" class="secondary">Setup wizard</button><button id="restartBtn" class="secondary">Restart NordRelay</button><span id="settingsStatus"></span></div>
           <div id="settingsForm" class="settings-grid"></div>
         </div>
       </section>
@@ -348,6 +406,10 @@ export function renderDashboardApp() {
     <div id="sessionDetail"></div>
     <div class="row dialog-actions"><button id="closeSessionDetailBtn" class="secondary">Close</button></div>
   </dialog>
+  <dialog id="userDetailDialog">
+    <div id="userDetail"></div>
+    <div class="row dialog-actions"><button id="closeUserDetailBtn" class="secondary">Close</button></div>
+  </dialog>
   <dialog id="adminDialog">
     <form method="dialog" id="adminDialogForm">
       <h2 id="adminDialogTitle">Edit</h2>
@@ -361,3 +423,6 @@ export function renderDashboardApp() {
 </body>
 </html>`;
 }
+function nonceAttr(cspNonce) {
+    return cspNonce ? ` nonce="${cspNonce.replace(/"/g, "")}"` : "";
+}