@nordbyte/nordrelay 0.8.1 → 0.8.3

package/dist/webui-assets/dashboard.js

@@ -9,6 +9,7 @@
     { path: "/api/progress", methods: ["GET"] },
     { path: "/api/metrics", methods: ["GET"] },
     { path: "/api/jobs", methods: ["GET"] },
+    { path: "/api/trace", methods: ["GET"] },
     { re: /^\/api\/jobs\/[^\/]+\/log$/, methods: ["GET"] },
     { re: /^\/api\/jobs\/[^\/]+\/action$/, methods: ["POST"] },
     { path: "/api/active-sessions", methods: ["GET"] },
@@ -25,8 +26,17 @@
     { path: "/api/peers/invite", methods: ["POST"] },
     { path: "/api/peers/pair", methods: ["POST"] },
     { path: "/api/peers/probe", methods: ["POST"] },
+    { path: "/api/peers/discover", methods: ["GET"] },
+    { path: "/api/peers/discovery-jobs", methods: ["GET", "POST"] },
+    { re: /^\/api\/peers\/discovery-jobs\/[^\/]+$/, methods: ["GET"] },
+    { re: /^\/api\/peers\/discovery-jobs\/[^\/]+\/cancel$/, methods: ["POST"] },
+    { re: /^\/api\/peers\/discovery-jobs\/[^\/]+\/log$/, methods: ["GET"] },
+    { path: "/api/peers/identity/backup", methods: ["GET"] },
+    { path: "/api/peers/identity/restore", methods: ["POST"] },
     { path: "/api/peers/global-sessions", methods: ["GET"] },
     { re: /^\/api\/peers\/invitations\/[^\/]+$/, methods: ["DELETE"] },
+    { re: /^\/api\/peers\/[^\/]+\/repin$/, methods: ["POST"] },
+    { re: /^\/api\/peers\/[^\/]+\/rotate$/, methods: ["POST"] },
     { re: /^\/api\/peers\/[^\/]+\/health$/, methods: ["GET"] },
     { re: /^\/api\/peers\/[^\/]+$/, methods: ["PATCH", "DELETE"] },
     { re: /^\/api\/peers\/[^\/]+\/proxy$/, methods: ["POST"] },
@@ -79,6 +89,7 @@
     { path: "/api/sync", methods: ["POST"] },
     { path: "/api/queue", methods: ["GET", "POST"] },
     { path: "/api/chat/history", methods: ["GET", "DELETE"] },
+    { path: "/api/chat/mirror", methods: ["GET", "POST"] },
     { path: "/api/activity", methods: ["GET"] },
     { path: "/api/artifacts", methods: ["GET", "DELETE"] },
     { path: "/api/artifacts/bulk", methods: ["POST"] },
@@ -102,6 +113,10 @@
     assertApiRoute(url.pathname, method);
     if (!options.local && shouldProxyApi(url.pathname)) {
       const peerId = selectedPeerTarget();
+      const csrfToken2 = (
+        /** @type {{ NORDRELAY_WEBUI_RUNTIME_STATE?: { csrfToken?: string | null } }} */
+        globalThis.NORDRELAY_WEBUI_RUNTIME_STATE?.csrfToken
+      );
       const proxyBody = JSON.stringify({
         method,
         path: url.pathname,
@@ -111,7 +126,7 @@
       });
       const res2 = await fetch("/api/peers/" + encodeURIComponent(peerId) + "/proxy", {
         method: "POST",
-        headers: { "content-type": "application/json" },
+        headers: { "content-type": "application/json", ...csrfToken2 ? { "x-nordrelay-csrf": csrfToken2 } : {} },
         body: proxyBody
       });
       if (res2.status === 401) {
@@ -127,8 +142,13 @@
       return data2;
     }
     const body = normalizeBody(options.body);
+    const csrfToken = (
+      /** @type {{ NORDRELAY_WEBUI_RUNTIME_STATE?: { csrfToken?: string | null } }} */
+      globalThis.NORDRELAY_WEBUI_RUNTIME_STATE?.csrfToken
+    );
     const headers = {
       ...body !== void 0 && shouldSendJsonHeader(options.body) ? { "content-type": "application/json" } : {},
+      ...method !== "GET" && csrfToken ? { "x-nordrelay-csrf": csrfToken } : {},
       ...options.headers || {}
     };
     const res = await fetch(url.pathname + url.search, { method, headers, body });
@@ -148,7 +168,7 @@
     const peerId = selectedPeerTarget();
     if (!peerId || peerId === "local") return false;
     if (!path.startsWith("/api/")) return false;
-    return !(path === "/api/auth/me" || path === "/api/dashboard/logout" || path === "/api/peers" || path === "/api/peers/invite" || path === "/api/peers/pair" || path === "/api/peers/probe" || /^\/api\/peers\/[^/]+(?:\/events|\/proxy)?$/.test(path) || isLocalAdminApi(path));
+    return !(path === "/api/auth/me" || path === "/api/dashboard/logout" || path === "/api/peers" || path === "/api/peers/invite" || path === "/api/peers/pair" || path === "/api/peers/probe" || path === "/api/peers/discover" || path === "/api/peers/discovery-jobs" || path === "/api/peers/global-sessions" || path === "/api/peers/identity/backup" || path === "/api/peers/identity/restore" || path === "/api/settings/wizard/test" || /^\/api\/peers\/discovery-jobs\//.test(path) || /^\/api\/peers\/[^/]+(?:\/events|\/proxy)?$/.test(path) || /^\/api\/peers\/[^/]+\/repin$/.test(path) || /^\/api\/peers\/[^/]+\/rotate$/.test(path) || isLocalAdminApi(path));
   }
   function isLocalAdminApi(path) {
     return path === "/api/permissions" || path === "/api/settings" || path === "/api/audit" || path === "/api/locks" || path === "/api/users" || path === "/api/groups" || path === "/api/telegram-chats" || path === "/api/discord-channels" || path === "/api/slack-channels" || /^\/api\/users\//.test(path) || /^\/api\/groups\//.test(path) || /^\/api\/telegram-chats\//.test(path) || /^\/api\/discord-channels\//.test(path) || /^\/api\/slack-channels\//.test(path);
@@ -230,20 +250,39 @@
       throw new Error("Unsupported WebUI API method: " + method + " " + path);
     }
   }
-  const state = { snapshot: null, controls: null, newSessionControls: null, enabledAgents: [], auth: null, permissions: [], settings: [], currentPage: "overview", settingsGroup: null, settingsWizard: null, accessTab: "users", logsPlain: "", logTimer: null, toastTimer: null, cliStatusActive: false, selectedArtifactTurns: /* @__PURE__ */ new Set(), mediaRecorder: null, recordedChunks: [], events: null, reconnectTimer: null, notifications: false, toolTooltipTimer: null, toolTooltipTarget: null, agentUpdateJobs: [], sessionsRequestId: 0, activeSessions: null, peers: null, peerInviteSecrets: {}, peerProbeResult: null, selectedPeer: localStorage.getItem("nordrelayPeerTarget") || "local" };
+  const state = { snapshot: null, controls: null, newSessionControls: null, enabledAgents: [], auth: null, csrfToken: null, permissions: [], settings: [], currentPage: "overview", settingsGroup: null, settingsWizard: null, accessTab: "users", logsPlain: "", logTimer: null, toastTimer: null, stickyToastActive: false, stickyToastText: "", cliStatusActive: false, webMirror: null, selectedArtifactTurns: /* @__PURE__ */ new Set(), mediaRecorder: null, recordedChunks: [], events: null, reconnectTimer: null, notifications: false, toolTooltipTimer: null, toolTooltipTarget: null, toolsVisible: false, agentUpdateJobs: [], sessionsRequestId: 0, chatHistoryRequestId: 0, chatRenderVersion: 0, activeSessions: null, peers: null, peerInviteSecrets: {}, peerProbeResult: null, peerDiscoveryJobs: [], selectedPeer: localStorage.getItem("nordrelayPeerTarget") || "local" };
   globalThis.NORDRELAY_WEBUI_RUNTIME_STATE = state;
+  const PAGE_LABELS = { overview: "Overview", chat: "Chat", sessions: "Sessions", queue: "Queue", tasks: "Tasks", metrics: "Metrics", activity: "Activity", trace: "Trace", artifacts: "Artifacts", adapters: "Adapters", peers: "Peers", access: "Users", version: "Version", settings: "Settings", logs: "Logs", diagnostics: "Diagnostics" };
+  const NAV_OPEN_STORAGE_KEY = "nordrelayNavOpenSections";
   function toast(msg, options = {}) {
     const el = document.getElementById("toast");
-    el.textContent = msg;
-    el.style.display = "block";
+    const text = String(msg ?? "");
     if (state.toastTimer) clearTimeout(state.toastTimer);
     state.toastTimer = null;
-    if (!options.sticky) {
-      state.toastTimer = setTimeout(() => {
-        el.style.display = "none";
-        state.toastTimer = null;
-      }, options.duration || 3500);
+    if (options.sticky) {
+      state.stickyToastActive = true;
+      state.stickyToastText = text;
+      if (el.textContent !== text) el.textContent = text;
+      if (el.style.display !== "block") el.style.display = "block";
+      return;
     }
+    el.textContent = text;
+    el.style.display = "block";
+    state.toastTimer = setTimeout(() => {
+      state.toastTimer = null;
+      if (state.stickyToastActive) {
+        el.textContent = state.stickyToastText;
+        el.style.display = "block";
+        return;
+      }
+      el.style.display = "none";
+    }, options.duration || 3500);
+  }
+  function clearStickyToast() {
+    state.stickyToastActive = false;
+    state.stickyToastText = "";
+    if (state.toastTimer) clearTimeout(state.toastTimer);
+    state.toastTimer = null;
   }
   function esc(s) {
     return String(s ?? "").replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" })[c]);
@@ -314,6 +353,7 @@
       el.hidden = !allowed;
       el.disabled = !allowed;
     });
+    syncNavSections();
     const currentButton = document.querySelector('nav button[data-page="' + cssEscape(state.currentPage) + '"]');
     if (currentButton && currentButton.hidden) {
       const first = [...document.querySelectorAll("nav button[data-page]")].find((b) => !b.hidden);
@@ -325,6 +365,7 @@
       ["#newSessionBtn,#attachBtn,#createSessionBtn", "sessions.write"],
       ["#retryBtn", "prompt.send"],
       ["#syncBtn,#handbackBtn", "sessions.write"],
+      ["#mirrorModeSelect", "settings.write"],
       ["#abortBtn", "prompt.abort"],
       ["#clearChatBtn", "sessions.write"],
       ["#saveSettingsBtn", "settings.write"],
@@ -334,7 +375,8 @@
       ["#clearLogsBtn", "logs.clear"],
       ["#createUserBtn,#createGroupBtn,#createChatBtn,#createDiscordChannelBtn,#createSlackChannelBtn", "users.write"],
       ["#createPeerInviteBtn,#addPeerBtn,[data-peer-edit],[data-peer-toggle],[data-peer-revoke],[data-peer-invite-delete]", "peers.write"],
-      ["#checkPeerReachabilityBtn,[data-peer-probe]", "peers.connect"],
+      ["#checkPeerReachabilityBtn,#discoverPeersBtn,#cancelPeerDiscoveryBtn,[data-peer-probe]", "peers.connect"],
+      ["#exportPeerIdentityBtn,#restorePeerIdentityBtn,[data-peer-repin],[data-peer-rotate]", "peers.write"],
       ["#lockSessionBtn,#unlockSessionBtn", "sessions.write"],
       ["[data-switch]", "sessions.write"],
       ["[data-queue],[data-q]", "queue.write"],
@@ -348,6 +390,59 @@
       if (!can(permission)) el.title = "Permission required: " + permission;
     }));
   }
+  function readOpenNavSections() {
+    try {
+      const raw = localStorage.getItem(NAV_OPEN_STORAGE_KEY);
+      if (!raw) return null;
+      const parsed = JSON.parse(raw);
+      return Array.isArray(parsed) ? new Set(parsed.filter(Boolean)) : null;
+    } catch {
+      return null;
+    }
+  }
+  function writeOpenNavSections() {
+    const open = [...document.querySelectorAll("[data-nav-section]")].filter((section) => section.dataset.navOpen === "true").map((section) => section.dataset.navSection).filter(Boolean);
+    localStorage.setItem(NAV_OPEN_STORAGE_KEY, JSON.stringify(open));
+  }
+  function setNavSectionOpen(sectionId, open, options = {}) {
+    const section = document.querySelector('[data-nav-section="' + cssEscape(sectionId) + '"]');
+    if (!section) return;
+    const items = section.querySelector(".nav-section-items");
+    const toggle = section.querySelector("[data-nav-toggle]");
+    section.dataset.navOpen = open ? "true" : "false";
+    if (items) items.hidden = !open;
+    if (toggle) toggle.setAttribute("aria-expanded", open ? "true" : "false");
+    if (options.persist !== false) writeOpenNavSections();
+  }
+  function sectionForPage(name) {
+    const button = document.querySelector('nav button[data-page="' + cssEscape(name) + '"]');
+    return button?.closest("[data-nav-section]")?.dataset.navSection || "";
+  }
+  function openSectionForPage(name, options = {}) {
+    const sectionId = sectionForPage(name);
+    if (sectionId) setNavSectionOpen(sectionId, true, options);
+  }
+  function syncNavSections() {
+    document.querySelectorAll("[data-nav-section]").forEach((section) => {
+      const visiblePages = [...section.querySelectorAll("button[data-page]")].filter((button) => !button.hidden);
+      const hasVisiblePages = visiblePages.length > 0;
+      section.hidden = !hasVisiblePages;
+      const active = visiblePages.some((button) => button.dataset.page === state.currentPage);
+      section.classList.toggle("active", active);
+      section.querySelector("[data-nav-toggle]")?.classList.toggle("active", active);
+      if (active && section.dataset.navOpen !== "true") setNavSectionOpen(section.dataset.navSection, true, { persist: false });
+    });
+  }
+  function initNavSections() {
+    const saved = readOpenNavSections();
+    document.querySelectorAll("[data-nav-section]").forEach((section) => {
+      const sectionId = section.dataset.navSection;
+      const open = saved ? saved.has(sectionId) : section.dataset.navDefaultOpen === "true";
+      setNavSectionOpen(sectionId, open, { persist: false });
+    });
+    openSectionForPage(state.currentPage, { persist: false });
+    syncNavSections();
+  }
   function modelLabel(m) {
     const meta = [m.contextWindow ? compactNum(m.contextWindow) : "", m.supportsImages === true ? "img" : m.supportsImages === false ? "text" : "", m.supportsThinking === true ? "think" : ""].filter(Boolean).join(" ");
     return (m.displayName || m.slug) + (meta ? " \xB7 " + meta : "");
@@ -360,10 +455,10 @@
     return Math.floor(min / 60) + "h ago";
   }
   function isCliRunningStatus(msg) {
-    return / CLI running\\b/.test(String(msg || ""));
+    return / CLI running\b/.test(String(msg || ""));
   }
   function isCliDoneStatus(msg) {
-    return / CLI task\\b/.test(String(msg || ""));
+    return / CLI task (?:finished|completed|failed|aborted)\b/i.test(String(msg || ""));
   }
   function applyTheme(theme) {
     document.documentElement.dataset.theme = theme;
@@ -373,11 +468,28 @@
   function toggleTheme() {
     applyTheme(document.documentElement.dataset.theme === "dark" ? "light" : "dark");
   }
+  function setToolsVisible(visible) {
+    state.toolsVisible = Boolean(visible);
+    const layout = document.getElementById("chatLayout");
+    const panel = document.getElementById("toolPanel");
+    const button = document.getElementById("toggleToolsBtn");
+    layout?.classList.toggle("tools-hidden", !state.toolsVisible);
+    if (panel) panel.hidden = !state.toolsVisible;
+    if (button) {
+      button.textContent = state.toolsVisible ? "Hide Tools" : "Show Tools";
+      button.setAttribute("aria-expanded", state.toolsVisible ? "true" : "false");
+    }
+  }
+  function toggleTools() {
+    setToolsVisible(!state.toolsVisible);
+  }
   function page(name) {
     state.currentPage = name;
-    document.querySelectorAll("nav button").forEach((b) => b.classList.toggle("active", b.dataset.page === name));
+    openSectionForPage(name);
+    document.querySelectorAll("nav button[data-page]").forEach((b) => b.classList.toggle("active", b.dataset.page === name));
+    syncNavSections();
     document.querySelectorAll(".page").forEach((p) => p.classList.toggle("active", p.id === "page-" + name));
-    document.getElementById("pageTitle").textContent = name[0].toUpperCase() + name.slice(1);
+    document.getElementById("pageTitle").textContent = PAGE_LABELS[name] || name[0].toUpperCase() + name.slice(1);
     document.getElementById("sidebar").classList.remove("open");
     void reloadCurrentPage().catch((err) => toast(err.message || String(err)));
   }
@@ -385,8 +497,8 @@
     const name = state.currentPage;
     if (name === "overview") await loadActiveSessions();
     if (name === "chat") {
-      await loadChatHistory();
-      scrollChatToBottom();
+      const [historyRendered] = await Promise.all([loadChatHistory({ forceScroll: true }), loadMirrorPreference()]);
+      if (historyRendered) scrollChatToBottom({ force: true });
     }
     if (name === "sessions") await loadSessions(true, options.agentId);
     if (name === "settings") await loadSettings();
@@ -394,6 +506,7 @@
     if (name === "diagnostics") await loadDiagnostics();
     if (name === "artifacts") await loadArtifacts();
     if (name === "activity") await loadActivity();
+    if (name === "trace") renderTracePlaceholder();
     if (name === "tasks") await loadTasks();
     if (name === "metrics") await loadMetrics();
     if (name === "adapters") await loadAdapterHealth();
@@ -401,15 +514,46 @@
     if (name === "access") await loadAccess();
     if (name === "version") await loadVersion();
   }
-  document.querySelectorAll("nav button").forEach((b) => b.onclick = () => page(b.dataset.page));
+  document.querySelectorAll("nav button[data-page]").forEach((b) => b.onclick = () => page(b.dataset.page));
+  document.querySelectorAll("[data-nav-toggle]").forEach((b) => b.onclick = () => {
+    const sectionId = b.dataset.navToggle;
+    const section = document.querySelector('[data-nav-section="' + cssEscape(sectionId) + '"]');
+    setNavSectionOpen(sectionId, section?.dataset.navOpen !== "true");
+    syncNavSections();
+  });
+  initNavSections();
   document.getElementById("menuBtn").onclick = () => document.getElementById("sidebar").classList.toggle("open");
-  document.getElementById("refreshBtn").onclick = () => loadBootstrap();
   document.getElementById("themeBtn").onclick = toggleTheme;
+  document.getElementById("toggleToolsBtn").onclick = toggleTools;
   document.getElementById("logoutBtn").onclick = () => safe(async () => {
     await api("/api/dashboard/logout", { method: "POST" });
     location.href = "/";
   });
   applyTheme(localStorage.getItem("nordrelayTheme") || "light");
+  setToolsVisible(false);
+  function uiBadge(text, status = "enabled") {
+    return '<span class="adapter-status ' + esc(status) + '">' + esc(text) + "</span>";
+  }
+  function uiRows(rows = []) {
+    return rows.filter(Boolean).map((row) => Array.isArray(row) ? "<small>" + esc(row[0]) + ": " + esc(row[1] ?? "-") + "</small>" : "<small>" + esc(row) + "</small>").join("");
+  }
+  function uiItem(title, options = {}) {
+    const badge = options.badge ? uiBadge(options.badge.text, options.badge.status) : "";
+    const rows = uiRows(options.rows || []);
+    const body = options.body || "";
+    const actions = options.actions ? '<div class="row">' + options.actions + "</div>" : "";
+    const titleAttr = options.title ? ' title="' + attr(options.title) + '"' : "";
+    return '<div class="item ' + (options.className ? attr(options.className) : "") + '"><strong' + titleAttr + ">" + esc(title) + " " + badge + "</strong>" + rows + body + actions + "</div>";
+  }
+  function uiEmpty(text) {
+    return '<div class="item">' + esc(text) + "</div>";
+  }
+  function uiCopyButton(value, label = "Copied", className = "copy-id") {
+    return value ? '<button type="button" class="' + attr(className) + '" data-copy-value="' + attr(value) + '" data-copy-label="' + attr(label) + '">' + esc(value) + "</button>" : "-";
+  }
+  function bindUiCopyButtons(root = document) {
+    root.querySelectorAll?.("[data-copy-value]").forEach((b) => b.onclick = () => copyText(b.dataset.copyValue || "", b.dataset.copyLabel || "Copied"));
+  }
   function createPaginator(containerId, onChange, pageSize = 50) {
     const container = document.getElementById(containerId);
     return {
@@ -440,9 +584,53 @@
     };
   }
   const sessionsPager = createPaginator("sessionsPager", () => loadSessions(false), 50);
+  function createCursorPager(containerId, onChange) {
+    const container = document.getElementById(containerId);
+    return {
+      stack: [],
+      cursor: null,
+      nextCursor: null,
+      hasNext: false,
+      total: 0,
+      reset() {
+        this.stack = [];
+        this.cursor = null;
+        this.nextCursor = null;
+        this.hasNext = false;
+        this.total = 0;
+      },
+      render(meta = {}) {
+        if (!container) return;
+        this.nextCursor = meta.nextCursor || null;
+        this.hasNext = Boolean(meta.hasNext);
+        this.total = Number(meta.total || 0);
+        container.innerHTML = "<span>" + esc(this.total ? this.total + " total" : "") + '</span><div class="pager-actions"><button data-cursor-action="prev" ' + (!this.stack.length ? "disabled" : "") + '>Previous</button><button data-cursor-action="next" ' + (!this.hasNext ? "disabled" : "") + ">Next</button></div>";
+        const prev = container.querySelector('[data-cursor-action="prev"]');
+        const next = container.querySelector('[data-cursor-action="next"]');
+        prev.onclick = () => {
+          if (this.stack.length) {
+            this.cursor = this.stack.pop() || null;
+            onChange();
+          }
+        };
+        next.onclick = () => {
+          if (this.hasNext && this.nextCursor) {
+            this.stack.push(this.cursor);
+            this.cursor = this.nextCursor;
+            onChange();
+          }
+        };
+      }
+    };
+  }
+  const activityPager = createCursorPager("activityPager", () => loadActivity(false));
+  const auditPager = createCursorPager("auditPager", () => loadAudit(false));
+  const artifactPager = createCursorPager("artifactPager", () => loadArtifacts(false));
+  const jobsPager = createCursorPager("jobsPager", () => loadTasks(false));
   async function loadBootstrap() {
     const local = await api("/api/bootstrap", { local: true });
     state.auth = local.auth || null;
+    state.csrfToken = local.auth?.csrfToken || state.csrfToken || null;
     state.permissions = local.auth?.permissions || [];
     await loadPeerSelector();
     const data = state.selectedPeer && state.selectedPeer !== "local" ? await api("/api/bootstrap") : local;
@@ -562,14 +750,14 @@
   }
   function activeSessionCard(s) {
     const thread = s.threadId || "not started";
-    const prompt = s.prompt ? "<small>" + esc(short(s.prompt, 250)) + "</small>" : "";
+    const prompt2 = s.prompt ? "<small>" + esc(short(s.prompt, 250)) + "</small>" : "";
     const tool2 = s.currentTool || s.lastTool || "-";
     const queue = s.queueLength ? " \xB7 " + s.queueLength + " queued" + (s.queuePaused ? " paused" : "") : "";
     const sourceLabel = activeSourceLabel(s.source);
     const mirrors = (s.mirrorChannels || []).map((m) => activeSourceLabel(m.source) + " " + m.mode + (m.queueLength ? " \xB7 " + m.queueLength + " queued" + (m.queuePaused ? " paused" : "") : "")).join(", ");
     const meta = ["Source " + sourceLabel, s.workspace, fmtDuration(s.durationMs), tool2 && tool2 !== "-" ? "tool " + tool2 : ""].filter(Boolean).join(" | ");
     const mirrorLine = mirrors ? "<small>Mirroring: " + esc(mirrors) + "</small>" : s.source === "cli" ? "<small>Mirroring: none</small>" : "";
-    return '<div class="item active-session-item"><strong>' + esc(s.agentLabel || s.agentId || "Agent") + ' <span class="adapter-status enabled">' + esc(s.status) + '</span></strong><small><button type="button" class="copy-id" data-active-copy="' + attr(thread) + '" title="Copy thread ID">' + esc(short(thread, 64)) + "</button>" + esc(queue) + "</small><small>" + esc(meta) + "</small>" + mirrorLine + prompt + '<div class="row"><button data-active-switch="' + attr(thread) + '" data-active-agent="' + attr(s.agentId || "") + '" ' + (!s.threadId ? "disabled " : "") + disabledAttr("sessions.write") + '>Switch</button><button class="secondary" data-active-detail="' + attr(thread) + '" data-active-agent="' + attr(s.agentId || "") + '" ' + (!s.threadId ? "disabled " : "") + ">Details</button></div></div>";
+    return '<div class="item active-session-item"><strong>' + esc(s.agentLabel || s.agentId || "Agent") + ' <span class="adapter-status enabled">' + esc(s.status) + '</span></strong><small><button type="button" class="copy-id" data-active-copy="' + attr(thread) + '" title="Copy thread ID">' + esc(short(thread, 64)) + "</button>" + esc(queue) + "</small><small>" + esc(meta) + "</small>" + mirrorLine + prompt2 + '<div class="row"><button data-active-switch="' + attr(thread) + '" data-active-agent="' + attr(s.agentId || "") + '" ' + (!s.threadId ? "disabled " : "") + disabledAttr("sessions.write") + '>Switch</button><button class="secondary" data-active-detail="' + attr(thread) + '" data-active-agent="' + attr(s.agentId || "") + '" ' + (!s.threadId ? "disabled " : "") + ">Details</button></div></div>";
   }
   function activeSourceLabel(source) {
     if (source === "cli") return "CLI";
@@ -672,9 +860,19 @@
     if (status === "running") return "planned";
     return "disabled";
   }
-  function scrollChatToBottom() {
+  const CHAT_CODE_BLOCK_PREFIX = "\uE010C";
+  const CHAT_CODE_BLOCK_SUFFIX = "\uE010";
+  const CHAT_INLINE_CODE_PREFIX = "\uE011I";
+  const CHAT_INLINE_CODE_SUFFIX = "\uE011";
+  function isChatNearBottom() {
+    const box = document.getElementById("messages");
+    if (!box) return true;
+    return box.scrollHeight - box.scrollTop - box.clientHeight < 80;
+  }
+  function scrollChatToBottom(options = {}) {
     const box = document.getElementById("messages");
     if (!box) return;
+    if (!options.force && !isChatNearBottom()) return;
     requestAnimationFrame(() => {
       box.scrollTop = box.scrollHeight;
       requestAnimationFrame(() => {
@@ -682,39 +880,251 @@
       });
     });
   }
-  function appendMessage(cls, text) {
+  function markChatRendered() {
+    state.chatRenderVersion = (state.chatRenderVersion || 0) + 1;
+  }
+  function appendMessage(cls, text, options = {}) {
     const box = document.getElementById("messages");
+    const stick = options.forceScroll || isChatNearBottom();
+    const previousTop = box?.scrollTop ?? 0;
     const div = document.createElement("div");
     div.className = "message " + cls;
-    div.textContent = text;
+    const body = document.createElement("div");
+    body.className = "message-body";
+    div.appendChild(body);
+    setMessageText(div, text);
     box.appendChild(div);
-    scrollChatToBottom();
+    if (stick) scrollChatToBottom({ force: true });
+    else box.scrollTop = previousTop;
+    return div;
+  }
+  function messageBody(div) {
+    let body = div.querySelector?.(".message-body");
+    if (!body) {
+      body = document.createElement("div");
+      body.className = "message-body";
+      div.textContent = "";
+      div.appendChild(body);
+    }
+    return body;
+  }
+  function setMessageText(div, text) {
+    div.__rawText = String(text ?? "");
+    const body = messageBody(div);
+    body.innerHTML = renderChatMarkdown(div.__rawText);
+    bindChatCopyButtons(body);
+    markChatRendered();
     return div;
   }
   function appendQueuedMessage(id) {
     const div = appendMessage("system", "Queued prompt " + id);
+    const body = messageBody(div);
     const btn = document.createElement("button");
     btn.textContent = "Cancel queued message";
     btn.className = "danger";
     btn.onclick = () => safe(async () => {
       const r = await api("/api/queue", { method: "POST", body: JSON.stringify({ action: "cancel", id }) });
       renderQueue(r.queue, r.paused);
-      div.textContent = "Cancelled queued prompt " + id;
+      setMessageText(div, "Cancelled queued prompt " + id);
     });
-    div.appendChild(document.createElement("br"));
-    div.appendChild(btn);
+    body.appendChild(document.createElement("br"));
+    body.appendChild(btn);
   }
-  function renderChatMessages(messages) {
+  function renderChatMessages(messages, options = {}) {
     state.chatMessages = messages || [];
     const box = document.getElementById("messages");
-    box.innerHTML = (messages || []).map((m) => '<div class="message ' + esc(m.role) + '"><small>' + esc((m.source || "web") + " / " + fmtDate(m.timestamp)) + "</small>\\n" + esc(m.text) + "</div>").join("");
-    scrollChatToBottom();
-  }
-  async function loadChatHistory() {
+    const stick = options.forceScroll || isChatNearBottom();
+    const previousTop = box?.scrollTop ?? 0;
+    box.innerHTML = (messages || []).map((m) => '<div class="message ' + esc(m.role) + '"><small>' + esc((m.source || "web") + " / " + fmtDate(m.timestamp)) + '</small><br><div class="message-body">' + renderChatMarkdown(m.text) + "</div></div>").join("");
+    bindChatCopyButtons(box);
+    markChatRendered();
+    if (stick) scrollChatToBottom({ force: true });
+    else box.scrollTop = previousTop;
+  }
+  async function loadChatHistory(options = {}) {
+    const requestId = (state.chatHistoryRequestId || 0) + 1;
+    state.chatHistoryRequestId = requestId;
+    const renderVersion = state.chatRenderVersion || 0;
     const data = await api("/api/chat/history");
-    renderChatMessages(data.messages || []);
+    if (requestId !== state.chatHistoryRequestId) return false;
+    if (options.skipIfRendered !== false && (state.chatRenderVersion || 0) !== renderVersion) return false;
+    renderChatMessages(data.messages || [], options);
+    return true;
   }
   let currentAgentMessage = null;
+  function renderChatMarkdown(text) {
+    let output = esc(String(text ?? ""));
+    const codeBlocks = [];
+    const inlineCode = [];
+    output = extractChatCodeBlocks(output, codeBlocks);
+    output = extractChatInlineCode(output, inlineCode);
+    output = formatChatBold(output);
+    output = formatChatItalic(output);
+    output = formatChatLinks(output);
+    output = formatChatBlockquotes(output);
+    output = formatChatLists(output);
+    output = formatChatHeadings(output);
+    output = restoreChatMarkdown(output, CHAT_INLINE_CODE_PREFIX, CHAT_INLINE_CODE_SUFFIX, inlineCode);
+    output = restoreChatMarkdown(output, CHAT_CODE_BLOCK_PREFIX, CHAT_CODE_BLOCK_SUFFIX, codeBlocks);
+    return output;
+  }
+  function extractChatCodeBlocks(text, blocks) {
+    return text.replace(/```([^\n`]*)\n?([\s\S]*?)```/g, (_match, rawLanguage, rawCode) => {
+      const language = String(rawLanguage || "").trim().replace(/[^a-zA-Z0-9_+-]/g, "");
+      const className = language ? ' class="language-' + attr(language) + '"' : "";
+      const label = language ? ' data-code-language="' + attr(language) + '"' : "";
+      const block = '<pre class="chat-code-block" tabindex="0" title="Copy code" data-chat-copy="code-block"' + label + "><code" + className + ">" + rawCode + "</code></pre>";
+      const index = blocks.push(block) - 1;
+      return CHAT_CODE_BLOCK_PREFIX + index + CHAT_CODE_BLOCK_SUFFIX;
+    });
+  }
+  function extractChatInlineCode(text, inline) {
+    let result = "";
+    let index = 0;
+    while (index < text.length) {
+      if (text[index] !== "`") {
+        result += text[index];
+        index += 1;
+        continue;
+      }
+      let tickCount = 1;
+      while (text[index + tickCount] === "`") tickCount += 1;
+      const fence = "`".repeat(tickCount);
+      const start = index + tickCount;
+      const end = text.indexOf(fence, start);
+      if (end === -1) {
+        result += fence;
+        index += tickCount;
+        continue;
+      }
+      const content = text.slice(start, end);
+      if (content.includes("\n")) {
+        result += fence;
+        index += tickCount;
+        continue;
+      }
+      const button = '<button type="button" class="chat-inline-code copy-id" title="Copy code" data-chat-copy="inline-code">' + content + "</button>";
+      result += CHAT_INLINE_CODE_PREFIX + (inline.push(button) - 1) + CHAT_INLINE_CODE_SUFFIX;
+      index = end + tickCount;
+    }
+    return result;
+  }
+  function formatChatBold(text) {
+    return text.replace(/(?<!\*)\*\*(?!\s)([^\n]*?\S)\*\*(?!\*)/g, "<strong>$1</strong>");
+  }
+  function formatChatItalic(text) {
+    return text.replace(/(?<![\w_])_(?!\s)([^_\n]*?\S)_(?![\w_])/g, "<em>$1</em>").replace(/(?<![\w*])\*(?!\s)([^*\n]*?\S)\*(?![\w*])/g, "<em>$1</em>");
+  }
+  function formatChatLinks(text) {
+    return text.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_match, label, url) => {
+      const safeUrl = sanitizeChatUrl(String(url).replace(/&amp;/g, "&"));
+      return '<a class="chat-link" href="' + attr(safeUrl) + '" target="_blank" rel="noreferrer noopener">' + label + "</a>";
+    });
+  }
+  function sanitizeChatUrl(url) {
+    const trimmed = String(url || "").trim().replace(/"/g, "%22");
+    return /^(https?|mailto):/i.test(trimmed) ? trimmed : "#";
+  }
+  function formatChatBlockquotes(text) {
+    const lines = text.split("\n");
+    const out = [];
+    let quote = [];
+    const flush = () => {
+      if (quote.length) {
+        out.push('<blockquote class="chat-blockquote">' + quote.join("\n") + "</blockquote>");
+        quote = [];
+      }
+    };
+    for (const line of lines) {
+      const match = line.match(/^&gt; ?(.*)$/);
+      if (match) {
+        quote.push(match[1]);
+        continue;
+      }
+      flush();
+      out.push(line);
+    }
+    flush();
+    return out.join("\n");
+  }
+  function formatChatLists(text) {
+    const lines = text.split("\n");
+    const out = [];
+    let list = null;
+    const flush = () => {
+      if (list) {
+        out.push("</" + list + ">");
+        list = null;
+      }
+    };
+    for (const line of lines) {
+      const task = line.match(/^\s*[-*]\s+\[([ xX])\]\s+(.+)$/);
+      const bullet = line.match(/^\s*[-*]\s+(.+)$/);
+      const ordered = line.match(/^\s*\d+[.)]\s+(.+)$/);
+      if (task) {
+        if (list !== "ul") {
+          flush();
+          out.push('<ul class="chat-list chat-task-list">');
+          list = "ul";
+        }
+        const checked = task[1].toLowerCase() === "x" ? "[x]" : "[ ]";
+        out.push('<li><span class="chat-task-mark">' + checked + "</span> " + task[2] + "</li>");
+        continue;
+      }
+      if (bullet) {
+        if (list !== "ul") {
+          flush();
+          out.push('<ul class="chat-list">');
+          list = "ul";
+        }
+        out.push("<li>" + bullet[1] + "</li>");
+        continue;
+      }
+      if (ordered) {
+        if (list !== "ol") {
+          flush();
+          out.push('<ol class="chat-list">');
+          list = "ol";
+        }
+        out.push("<li>" + ordered[1] + "</li>");
+        continue;
+      }
+      flush();
+      out.push(line);
+    }
+    flush();
+    return out.join("\n");
+  }
+  function formatChatHeadings(text) {
+    return text.split("\n").map((line) => {
+      const match = line.match(/^(#{1,4})\s+(.+)$/);
+      return match ? '<strong class="chat-heading chat-heading-' + match[1].length + '">' + match[2] + "</strong>" : line;
+    }).join("\n");
+  }
+  function restoreChatMarkdown(text, prefix, suffix, values) {
+    const pattern = new RegExp(escapeChatRegExp(prefix) + "(\\d+)" + escapeChatRegExp(suffix), "g");
+    return text.replace(pattern, (_match, rawIndex) => values[Number.parseInt(rawIndex, 10)] ?? "");
+  }
+  function escapeChatRegExp(text) {
+    return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+  function bindChatCopyButtons(root) {
+    root.querySelectorAll?.("[data-chat-copy]").forEach((el) => {
+      el.onclick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const code = el.dataset.chatCopy === "code-block" ? el.querySelector("code")?.textContent : el.textContent;
+        copyText(code || "", "Copied code");
+      };
+      el.onkeydown = (event) => {
+        if (el.tagName === "BUTTON") return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          el.click();
+        }
+      };
+    });
+  }
   function connectEvents() {
     if (state.events) state.events.close();
     const eventsUrl = state.selectedPeer && state.selectedPeer !== "local" ? "/api/peers/" + encodeURIComponent(state.selectedPeer) + "/events?contextKey=" + encodeURIComponent("web:dashboard") : "/api/events";
@@ -765,9 +1175,10 @@
     });
     events.addEventListener("text_delta", (e) => {
       const d = JSON.parse(e.data);
+      const stick = isChatNearBottom();
       if (!currentAgentMessage) currentAgentMessage = appendMessage("agent", "");
-      currentAgentMessage.textContent += d.delta;
-      scrollChatToBottom();
+      setMessageText(currentAgentMessage, (currentAgentMessage.__rawText || "") + d.delta);
+      if (stick) scrollChatToBottom({ force: true });
       if (state.currentPage === "tasks") loadTasks();
     });
     events.addEventListener("tool_start", (e) => {
@@ -785,7 +1196,7 @@
     });
     events.addEventListener("todo_update", (e) => {
       const d = JSON.parse(e.data);
-      tool("tool", "Plan:\\n" + d.items.map((i) => (i.completed ? "[x] " : "[ ] ") + i.text).join("\\n"));
+      tool("tool", "Plan:\n" + d.items.map((i) => (i.completed ? "[x] " : "[ ] ") + i.text).join("\n"));
     });
     events.addEventListener("turn_error", (e) => {
       const d = JSON.parse(e.data);
@@ -806,7 +1217,10 @@
         toast(msg, { sticky: true });
         return;
       }
-      if (isCliDoneStatus(msg)) state.cliStatusActive = false;
+      if (isCliDoneStatus(msg)) {
+        state.cliStatusActive = false;
+        clearStickyToast();
+      }
       toast(msg);
     });
     events.onerror = () => {
@@ -971,6 +1385,27 @@
   });
   document.getElementById("promptForm").onsubmit = (e) => safe(async () => {
     e.preventDefault();
+    const input = document.getElementById("promptInput");
+    const text = input.value.trim();
+    if (/^\/mirror\b/i.test(text)) {
+      if (selectedFiles.length) {
+        toast("/mirror cannot be sent with attachments");
+        return;
+      }
+      const argument = text.replace(/^\/mirror\b/i, "").trim();
+      if (argument && !can("settings.write")) {
+        toast("Permission required: settings.write");
+        return;
+      }
+      if (!argument && !can("sessions.read")) {
+        toast("Permission required: sessions.read");
+        return;
+      }
+      input.value = "";
+      const data = argument ? await setMirrorPreference(argument) : await loadMirrorPreference();
+      appendMessage("system", data?.response?.plain || "CLI mirroring: " + (data?.mode || "-"));
+      return;
+    }
     if (!can("prompt.send")) {
       toast("Permission required: prompt.send");
       return;
@@ -979,8 +1414,6 @@
       toast("Permission required: files.write");
       return;
     }
-    const input = document.getElementById("promptInput");
-    const text = input.value.trim();
     if (!text && selectedFiles.length === 0) return;
     const files = selectedFiles;
     input.value = "";
@@ -989,7 +1422,7 @@
     renderSelectedFiles();
     const payloadFiles = files.length ? await Promise.all(files.map(filePayload)) : [];
     const r = files.length ? await api("/api/prompt/upload", { method: "POST", body: JSON.stringify({ text, files: payloadFiles }) }) : await api("/api/prompt", { method: "POST", body: JSON.stringify({ text }) });
-    if (r.transcribeOnly) appendMessage("system", "Transcribed audio:\\n" + (r.transcript || "(empty)"));
+    if (r.transcribeOnly) appendMessage("system", "Transcribed audio:\n" + (r.transcript || "(empty)"));
     else if (r.queued) appendQueuedMessage(r.queueId);
   }, e);
   document.getElementById("newSessionBtn").onclick = () => {
@@ -1024,6 +1457,14 @@
     loadBootstrap();
   });
   document.getElementById("notifyBtn").onclick = () => enableNotifications();
+  document.getElementById("mirrorModeSelect").onchange = () => safe(async () => {
+    if (!can("settings.write")) {
+      toast("Permission required: settings.write");
+      renderMirrorPreference(state.webMirror);
+      return;
+    }
+    await setMirrorPreference(document.getElementById("mirrorModeSelect").value);
+  });
   document.getElementById("clearChatBtn").onclick = () => safe(async () => {
     if (!can("sessions.write")) {
       toast("Permission required: sessions.write");
@@ -1049,7 +1490,7 @@
       return;
     }
     const r = await api("/api/handback", { method: "POST" });
-    appendMessage("system", "Handback command:\\n" + (r.command || "No command available"));
+    appendMessage("system", "Handback command:\n" + (r.command || "No command available"));
   });
   document.getElementById("recordBtn").onclick = () => safe(async () => {
     if (!can("files.write")) {
@@ -1077,6 +1518,24 @@
     state.mediaRecorder.start();
     btn.textContent = "Stop recording";
   });
+  function renderMirrorPreference(data) {
+    if (!data) return;
+    state.webMirror = data;
+    const select = document.getElementById("mirrorModeSelect");
+    if (select && data.mode) select.value = data.mode;
+  }
+  async function loadMirrorPreference() {
+    if (!can("sessions.read")) return null;
+    const data = await api("/api/chat/mirror");
+    renderMirrorPreference(data);
+    return data;
+  }
+  async function setMirrorPreference(argument) {
+    const data = await api("/api/chat/mirror", { method: "POST", body: JSON.stringify({ argument }) });
+    renderMirrorPreference(data);
+    toast("Mirror " + data.mode);
+    return data;
+  }
   function renderNewSessionControls(c) {
     const s = state.snapshot?.session || {};
     const caps = c.capabilities || {};
@@ -1120,7 +1579,7 @@
     document.getElementById("newSessionDialog").close();
     toast("New session started");
     await loadBootstrap();
-    await loadChatHistory();
+    await loadChatHistory({ forceScroll: true });
   }, e);
   document.getElementById("cancelSessionBtn").onclick = () => document.getElementById("newSessionDialog").close();
   function val(id) {
@@ -1193,7 +1652,8 @@
   };
   function renderQueue(queue, paused) {
     document.getElementById("queueStatus").textContent = paused ? "Paused" : "Running";
-    document.getElementById("queueList").innerHTML = (queue || []).map((q, i) => '<div class="item queue-item" draggable="true" data-queue-id="' + attr(q.id) + '"><strong>' + esc(i + 1 + ". " + q.id + " - " + q.description) + "</strong><small>Created " + fmtDate(q.createdAt) + " / attempts " + q.attempts + (q.lastError ? " / " + esc(q.lastError) : "") + '</small><div class="row"><button data-q="run" data-id="' + q.id + '"' + disabledAttr("queue.write") + '>Run</button><button data-q="top" data-id="' + q.id + '"' + disabledAttr("queue.write") + '>Top</button><button data-q="up" data-id="' + q.id + '"' + disabledAttr("queue.write") + '>Up</button><button data-q="down" data-id="' + q.id + '"' + disabledAttr("queue.write") + '>Down</button><button data-q="cancel" data-id="' + q.id + '" class="danger"' + disabledAttr("queue.write") + ">Cancel</button></div></div>").join("") || '<div class="item">Queue is empty.</div>';
+    document.getElementById("queueList").innerHTML = (queue || []).map((q, i) => '<div class="item queue-item" draggable="true" data-queue-id="' + attr(q.id) + '"><strong>' + esc(i + 1 + ". " + q.id + " - " + q.description) + "</strong><small>Created " + fmtDate(q.createdAt) + " / attempts " + q.attempts + (q.correlationId ? ' / CID: <button type="button" class="copy-id" data-copy-id="' + attr(q.correlationId) + '">' + esc(q.correlationId) + "</button>" : "") + (q.lastError ? " / " + esc(q.lastError) : "") + '</small><div class="row"><button data-q="run" data-id="' + q.id + '"' + disabledAttr("queue.write") + '>Run</button><button data-q="top" data-id="' + q.id + '"' + disabledAttr("queue.write") + '>Top</button><button data-q="up" data-id="' + q.id + '"' + disabledAttr("queue.write") + '>Up</button><button data-q="down" data-id="' + q.id + '"' + disabledAttr("queue.write") + '>Down</button><button data-q="cancel" data-id="' + q.id + '" class="danger"' + disabledAttr("queue.write") + ">Cancel</button></div></div>").join("") || '<div class="item">Queue is empty.</div>';
+    document.querySelectorAll("#queueList [data-copy-id]").forEach((b) => b.onclick = () => copyText(b.dataset.copyId || "", "Correlation ID copied"));
     document.querySelectorAll("[data-q]").forEach((b) => b.onclick = () => safe(async () => {
       if (!can("queue.write")) {
         toast("Permission required: queue.write");
@@ -1238,12 +1698,14 @@
     const r = await api("/api/queue", { method: "POST", body: JSON.stringify({ action: b.dataset.queue }) });
     renderQueue(r.queue, r.paused);
   }));
-  async function loadArtifacts() {
+  async function loadArtifacts(reset = true) {
+    if (reset) artifactPager.reset();
     setLoading("artifactList", "Loading artifacts...");
     document.getElementById("artifactPreview").innerHTML = "";
-    const data = await api("/api/artifacts");
+    const data = await api("/api/artifacts", { query: { limit: 50, cursor: artifactPager.cursor || void 0 } });
     state.artifactReports = data.reports || [];
     renderArtifacts();
+    artifactPager.render(data.pagination || {});
   }
   function artifactMatches(a, kind, query) {
     const name = (a.name || a.relativePath || "").toLowerCase();
@@ -1252,7 +1714,7 @@
     if (kind === "docs") return !/\\.(png|jpe?g|gif|webp|svg)$/i.test(name);
     return true;
   }
-  document.getElementById("reloadArtifactsBtn").onclick = loadArtifacts;
+  document.getElementById("reloadArtifactsBtn").onclick = () => loadArtifacts(true);
   document.getElementById("artifactSearch").oninput = renderArtifacts;
   document.getElementById("artifactKind").onchange = renderArtifacts;
   document.getElementById("deleteSelectedArtifactsBtn").onclick = () => safe(async () => {
@@ -1368,18 +1830,22 @@
       throw err;
     }
   }
-  async function loadTasks() {
+  async function loadTasks(reset = true) {
+    if (reset) jobsPager.reset();
     setLoading("tasksList", "Loading tasks...");
-    const [d, jobs] = await Promise.all([api("/api/tasks"), api("/api/jobs")]);
+    const [d, jobs] = await Promise.all([api("/api/tasks"), api("/api/jobs", { query: { limit: 100, cursor: jobsPager.cursor || void 0 } })]);
     renderTasks(d, jobs);
+    jobsPager.render(jobs?.pagination || {});
   }
   function taskCard(t, title) {
     if (!t) return '<div class="item"><strong>' + esc(title) + "</strong><small>Idle</small></div>";
     const tools = (t.tools || []).map((x) => x.name + " x" + x.count).join(", ") || "-";
-    return '<div class="item"><strong>' + esc(title + " \xB7 " + t.status) + "</strong><small>" + esc((t.agentLabel || t.agentId || t.source) + " / " + (t.threadId || "-")) + "</small><small>" + esc("Elapsed " + fmtDuration(t.durationMs) + " / current " + (t.currentTool || "-") + " / last " + (t.lastTool || "-")) + "</small><small>" + esc("Tools: " + tools + " / output chars " + (t.outputChars || 0)) + "</small><small>" + esc(t.prompt || t.detail || "") + "</small></div>";
+    return '<div class="item"><strong>' + esc(title + " \xB7 " + t.status) + "</strong><small>" + esc((t.agentLabel || t.agentId || t.source) + " / " + (t.threadId || "-")) + "</small>" + (t.correlationId ? '<small>CID: <button type="button" class="copy-id" data-copy-id="' + attr(t.correlationId) + '">' + esc(t.correlationId) + '</button> <button type="button" class="secondary mini-button" data-trace-id="' + attr(t.correlationId) + '">Trace</button></small>' : "") + "<small>" + esc("Elapsed " + fmtDuration(t.durationMs) + " / current " + (t.currentTool || "-") + " / last " + (t.lastTool || "-")) + "</small><small>" + esc("Tools: " + tools + " / output chars " + (t.outputChars || 0)) + "</small><small>" + esc(t.prompt || t.detail || "") + "</small></div>";
   }
   function renderTasks(d, jobs) {
-    document.getElementById("tasksList").innerHTML = '<div class="task-grid">' + taskCard(d.current, "Current web turn") + taskCard(d.external, "External CLI turn") + '</div><h2 class="task-section-title">Unified jobs</h2><div class="list">' + renderUnifiedJobs(jobs?.jobs || []) + '</div><h2 class="task-section-title">Queue</h2><div class="list">' + ((d.queue || []).map((q) => '<div class="item"><strong>' + esc(q.id + " \xB7 " + q.description) + "</strong><small>" + esc(fmtDate(q.createdAt) + " / attempts " + q.attempts) + '</small><div class="row"><button data-q="run" data-id="' + attr(q.id) + '"' + disabledAttr("queue.write") + '>Run</button><button data-q="cancel" data-id="' + attr(q.id) + '" class="danger"' + disabledAttr("queue.write") + ">Cancel</button></div></div>").join("") || '<div class="item">Queue is empty.</div>') + '</div><h2 class="task-section-title">Recent turns</h2><div class="list">' + ((d.recent || []).map((e) => '<div class="item"><strong>' + esc(e.status + " / " + e.source + " / " + e.type) + "</strong><small>" + esc(fmtDate(e.timestamp) + " / " + (e.threadId || "-")) + "</small><small>" + esc(short(e.prompt || e.detail || "", 300)) + "</small></div>").join("") || '<div class="item">No recent tasks.</div>') + "</div>";
+    document.getElementById("tasksList").innerHTML = '<div class="task-grid">' + taskCard(d.current, "Current web turn") + taskCard(d.external, "External CLI turn") + '</div><h2 class="task-section-title">Unified jobs</h2><div class="list">' + renderUnifiedJobs(jobs?.jobs || []) + '</div><h2 class="task-section-title">Queue</h2><div class="list">' + ((d.queue || []).map((q) => '<div class="item"><strong>' + esc(q.id + " \xB7 " + q.description) + "</strong><small>" + esc(fmtDate(q.createdAt) + " / attempts " + q.attempts) + (q.correlationId ? " / CID: " : "") + (q.correlationId ? '<button type="button" class="copy-id" data-copy-id="' + attr(q.correlationId) + '">' + esc(q.correlationId) + '</button> <button type="button" class="secondary mini-button" data-trace-id="' + attr(q.correlationId) + '">Trace</button>' : "") + '</small><div class="row"><button data-q="run" data-id="' + attr(q.id) + '"' + disabledAttr("queue.write") + '>Run</button><button data-q="cancel" data-id="' + attr(q.id) + '" class="danger"' + disabledAttr("queue.write") + ">Cancel</button></div></div>").join("") || '<div class="item">Queue is empty.</div>') + '</div><h2 class="task-section-title">Recent turns</h2><div class="list">' + ((d.recent || []).map((e) => '<div class="item"><strong>' + esc(e.status + " / " + e.source + " / " + e.type) + "</strong><small>" + esc(fmtDate(e.timestamp) + " / " + (e.threadId || "-")) + (e.correlationId ? " / CID: " : "") + (e.correlationId ? '<button type="button" class="copy-id" data-copy-id="' + attr(e.correlationId) + '">' + esc(e.correlationId) + '</button> <button type="button" class="secondary mini-button" data-trace-id="' + attr(e.correlationId) + '">Trace</button>' : "") + "</small><small>" + esc(short(e.prompt || e.detail || "", 300)) + "</small></div>").join("") || '<div class="item">No recent tasks.</div>') + "</div>";
+    document.querySelectorAll("#tasksList [data-copy-id]").forEach((b) => b.onclick = () => copyText(b.dataset.copyId || "", "Correlation ID copied"));
+    document.querySelectorAll("#tasksList [data-trace-id]").forEach((b) => b.onclick = () => openTrace(b.dataset.traceId || ""));
     document.querySelectorAll("#tasksList [data-q]").forEach((b) => b.onclick = () => safe(async () => {
       if (!can("queue.write")) {
         toast("Permission required: queue.write");
@@ -1396,7 +1862,7 @@
     return jobs.map((job) => {
       const retryPermission = jobActionPermission(job, "retry");
       const cancelPermission = jobActionPermission(job, "cancel");
-      return '<div class="item"><strong>' + esc(job.title) + ' <span class="adapter-status ' + esc(jobStatusClass(job.status)) + '">' + esc(job.status) + "</span></strong><small>" + esc([job.kind, job.source, job.agentLabel || job.agentId, fmtDate(job.startedAt)].filter(Boolean).join(" / ")) + "</small>" + (job.owner ? "<small>" + esc("Owner: " + (job.owner.label || job.owner.username || job.owner.id || "-")) + "</small>" : "") + (job.threadId ? "<small>" + esc("Thread: " + job.threadId) + "</small>" : "") + (job.summary ? "<small>" + esc(short(job.summary, 300)) + "</small>" : "") + (job.logTail ? '<pre class="update-log">' + esc(short(job.logTail, 1200)) + "</pre>" : "") + '<div class="row">' + (job.canReadLog ? '<button class="secondary" data-job-log="' + attr(job.id) + '">Log</button>' : "") + (job.canRetry ? '<button class="secondary" data-job-action="retry" data-job-permission="' + attr(retryPermission) + '" data-job-id="' + attr(job.id) + '"' + disabledAttr(retryPermission) + ">Retry</button>" : "") + (job.canCancel ? '<button class="danger" data-job-action="cancel" data-job-permission="' + attr(cancelPermission) + '" data-job-id="' + attr(job.id) + '"' + disabledAttr(cancelPermission) + ">Cancel</button>" : "") + "</div></div>";
+      return '<div class="item"><strong>' + esc(job.title) + ' <span class="adapter-status ' + esc(jobStatusClass(job.status)) + '">' + esc(job.status) + "</span></strong><small>" + esc([job.kind, job.source, job.agentLabel || job.agentId, fmtDate(job.startedAt)].filter(Boolean).join(" / ")) + "</small>" + (job.correlationId ? '<small>CID: <button type="button" class="copy-id" data-copy-id="' + attr(job.correlationId) + '">' + esc(job.correlationId) + '</button> <button type="button" class="secondary mini-button" data-trace-id="' + attr(job.correlationId) + '">Trace</button></small>' : "") + (job.owner ? "<small>" + esc("Owner: " + (job.owner.label || job.owner.username || job.owner.id || "-")) + "</small>" : "") + (job.threadId ? "<small>" + esc("Thread: " + job.threadId) + "</small>" : "") + (job.summary ? "<small>" + esc(short(job.summary, 300)) + "</small>" : "") + (job.logTail ? '<pre class="update-log">' + esc(short(job.logTail, 1200)) + "</pre>" : "") + '<div class="row">' + (job.canReadLog ? '<button class="secondary" data-job-log="' + attr(job.id) + '">Log</button>' : "") + (job.canRetry ? '<button class="secondary" data-job-action="retry" data-job-permission="' + attr(retryPermission) + '" data-job-id="' + attr(job.id) + '"' + disabledAttr(retryPermission) + ">Retry</button>" : "") + (job.canCancel ? '<button class="danger" data-job-action="cancel" data-job-permission="' + attr(cancelPermission) + '" data-job-id="' + attr(job.id) + '"' + disabledAttr(cancelPermission) + ">Cancel</button>" : "") + "</div></div>";
     }).join("") || '<div class="item">No jobs.</div>';
   }
   function jobActionPermission(job, action) {
@@ -1424,7 +1890,7 @@
       }
     }));
   }
-  document.getElementById("reloadTasksBtn").onclick = () => loadTasks();
+  document.getElementById("reloadTasksBtn").onclick = () => loadTasks(true);
   async function loadMetrics() {
     setLoading("metricsPanel", "Loading metrics...");
     const d = await api("/api/metrics");
@@ -1488,20 +1954,28 @@
       ["Buckets", (rate?.buckets || []).length]
     ].map(([k, v]) => [name + " " + k, v]);
   }
+  function webRouteRows(d) {
+    return (d.web?.routes || []).slice(0, 8).map((route) => [route.method + " " + route.path, route.averageMs + "ms avg / " + route.maxMs + "ms max / " + route.count + " hit(s)"]);
+  }
+  function webSlowRows(d) {
+    return (d.web?.slowest || []).slice(0, 8).map((sample) => [sample.method + " " + sample.path, sample.durationMs + "ms / " + sample.statusCode + " / " + fmtDate(sample.at)]);
+  }
   function renderMetrics(d) {
     const adapters = d.adapters || {};
     const adapterCards = Object.entries(adapters).map(([name, rate]) => card(name.charAt(0).toUpperCase() + name.slice(1) + " rate limits", rateRows("", rate).map(([k, v]) => [String(k).trim(), v]))).join("");
-    document.getElementById("metricsPanel").innerHTML = '<div class="metrics-grid">' + card("Runtime", metricStatusRows(d)) + card("Process", metricProcessRows(d)) + card("Jobs", metricJobRows(d)) + adapterCards + "</div>";
+    document.getElementById("metricsPanel").innerHTML = '<div class="metrics-grid">' + card("Runtime", metricStatusRows(d)) + card("Process", metricProcessRows(d)) + card("Jobs", metricJobRows(d)) + card("Web API latency", webRouteRows(d)) + card("Slow Web API calls", webSlowRows(d)) + adapterCards + "</div>";
   }
   document.getElementById("reloadMetricsBtn").onclick = () => safe(loadMetrics);
   function activityQuery() {
-    return { source: val("activitySource"), category: val("activityCategory"), status: val("activityStatus"), limit: val("activityLimit") || "100", actor: val("activityActor") || void 0, agent: val("activityAgent") || "all", thread: val("activityThread") || void 0, workspace: val("activityWorkspace") || void 0, type: val("activityType") || void 0, since: val("activitySince") || void 0 };
+    return { source: val("activitySource"), category: val("activityCategory"), status: val("activityStatus"), limit: val("activityLimit") || "100", cursor: activityPager.cursor || void 0, actor: val("activityActor") || void 0, agent: val("activityAgent") || "all", thread: val("activityThread") || void 0, workspace: val("activityWorkspace") || void 0, type: val("activityType") || void 0, since: val("activitySince") || void 0 };
   }
-  async function loadActivity() {
+  async function loadActivity(reset = true) {
+    if (reset) activityPager.reset();
     setLoading("activityList", "Loading activity...");
     const data = await api("/api/activity", { query: activityQuery() });
     state.activityEvents = data.events || [];
     renderActivity(state.activityEvents);
+    activityPager.render(data.pagination || {});
   }
   function activityWorkspace(e) {
     const active = state.snapshot?.session;
@@ -1517,6 +1991,7 @@
     const actor = activityActorText(e);
     const parts = [];
     if (actor) parts.push("User: " + esc(actor));
+    if (e.correlationId) parts.push('CID: <button type="button" class="copy-id" data-copy-id="' + attr(e.correlationId) + '">' + esc(e.correlationId) + '</button> <button type="button" class="secondary mini-button" data-trace-id="' + attr(e.correlationId) + '">Trace</button>');
     if (e.threadId) parts.push('<button type="button" class="copy-id" data-copy-id="' + attr(e.threadId) + '">' + esc(e.threadId) + "</button>");
     if (workspace) parts.push(esc(workspace));
     if (duration) parts.push(esc(duration));
@@ -1528,9 +2003,10 @@
       return '<div class="item"><strong><span class="chip ' + (e.status === "failed" ? "error" : e.status === "queued" ? "warn" : "") + '">' + esc(e.status) + "</span>" + esc([fmtDate(e.timestamp), e.source, e.category, e.type].filter(Boolean).join(" | ")) + "</strong><small>" + esc(short(e.prompt || e.detail || "", 220)) + "</small>" + (meta ? "<small>" + meta + "</small>" : "") + "</div>";
     }).join("") || '<div class="item">No activity.</div>';
     document.querySelectorAll("#activityList [data-copy-id]").forEach((b) => b.onclick = () => copyText(b.dataset.copyId || "", "Thread ID copied"));
+    document.querySelectorAll("#activityList [data-trace-id]").forEach((b) => b.onclick = () => openTrace(b.dataset.traceId || ""));
   }
-  document.getElementById("loadActivityBtn").onclick = () => loadActivity();
-  document.getElementById("activitySince").onchange = () => loadActivity();
+  document.getElementById("loadActivityBtn").onclick = () => loadActivity(true);
+  document.getElementById("activitySince").onchange = () => loadActivity(true);
   document.getElementById("exportActivityBtn").onclick = () => {
     const rows = (state.activityEvents || []).map((e) => [e.timestamp, e.source, e.category || "", e.status, e.type, activityActorText(e), e.agentId || "", e.threadId || "", activityWorkspace(e), e.prompt || e.detail || ""].join("\\t")).join("\\n");
     const blob = new Blob([rows], { type: "text/tab-separated-values" });
@@ -1540,23 +2016,63 @@
     a.click();
     URL.revokeObjectURL(a.href);
   };
+  function renderTracePlaceholder() {
+    const target = document.getElementById("traceDetail");
+    if (target && !target.innerHTML) target.innerHTML = '<div class="item">Enter a correlation ID or open Trace from Activity/Tasks.</div>';
+  }
+  async function openTrace(correlationId) {
+    document.getElementById("traceCorrelationId").value = correlationId;
+    page("trace");
+    await loadTrace(correlationId);
+  }
+  async function loadTrace(correlationId = val("traceCorrelationId")) {
+    if (!correlationId) {
+      renderTracePlaceholder();
+      return;
+    }
+    setLoading("traceDetail", "Loading trace...");
+    const data = await api("/api/trace", { query: { correlationId } });
+    renderTrace(data);
+  }
+  function renderTrace(data) {
+    const s = data.summary || {};
+    const rows = [["Correlation ID", data.correlationId], ["Status", s.status], ["Started", fmtDate(s.startedAt)], ["Updated", fmtDate(s.updatedAt)], ["Agent", s.agentId], ["Thread", s.threadId], ["Workspace", s.workspace], ["Sources", (s.sources || []).join(", ")]];
+    const timeline = (data.timeline || []).map((item) => '<div class="item"><strong>' + esc(fmtDate(item.at) + " | " + item.source + " | " + (item.status || item.type)) + "</strong><small>" + esc([item.title, item.agentId, item.threadId, item.workspace].filter(Boolean).join(" | ")) + "</small>" + (item.detail ? "<small>" + esc(short(item.detail, 500)) + "</small>" : "") + "</div>").join("") || '<div class="item">No events for this correlation ID.</div>';
+    document.getElementById("traceDetail").innerHTML = card("Trace summary", rows) + '<h2 class="task-section-title">Timeline</h2>' + timeline;
+  }
+  document.getElementById("loadTraceBtn").onclick = () => loadTrace();
+  document.getElementById("traceCorrelationId").addEventListener("keydown", (e) => {
+    if (e.key === "Enter") loadTrace();
+  });
   async function loadSettings() {
     state.settingsWizard = null;
-    document.getElementById("settingsTabs").style.display = "";
+    document.getElementById("settingsTabHeader").style.display = "";
+    document.getElementById("settingsSubnav").style.display = "";
+    document.getElementById("settingsActions").style.display = "";
     setLoading("settingsForm", "Loading settings...");
     const data = await api("/api/settings");
     state.settings = data.settings;
     renderSettings();
   }
-  const settingsGroupOrder = ["Agents", "Codex", "Pi", "Hermes", "OpenClaw", "Claude Code", "Telegram", "Discord", "Slack", "Operations", "Artifacts", "Workspace", "Peers", "Voice", "Dashboard"];
-  const agentSettingGroups = ["Codex", "Pi", "Hermes", "OpenClaw", "Claude Code"];
-  function orderedSettingsGroups(groups) {
-    const known = settingsGroupOrder.filter((name) => groups[name]);
-    const extra = Object.keys(groups).filter((name) => !settingsGroupOrder.includes(name)).sort();
-    return known.concat(extra);
-  }
-  function agentSettingsNav(current) {
-    return '<div class="agent-settings-nav"><strong>Agent settings</strong>' + agentSettingGroups.map((name) => '<button type="button" data-setting-tab="' + attr(name) + '" class="' + (name === current ? "active" : "") + '">' + esc(name) + "</button>").join("") + "</div>";
+  const settingsCategoryDefinitions = [
+    { id: "agents", label: "Agents", groups: ["Agents", "Codex", "Pi", "Hermes", "OpenClaw", "Claude Code"] },
+    { id: "chat", label: "Chat", groups: ["Telegram", "Discord", "Slack"] },
+    { id: "operations", label: "Operations", groups: ["Operations", "Artifacts", "Peers", "Voice"] },
+    { id: "workspace", label: "Workspace", groups: ["Workspace"] },
+    { id: "dashboard", label: "Dashboard", groups: ["Dashboard"] }
+  ];
+  function settingsCategories(groups) {
+    const used = /* @__PURE__ */ new Set();
+    const categories = settingsCategoryDefinitions.map((def) => {
+      const available = def.groups.filter((name) => groups[name]);
+      available.forEach((name) => used.add(name));
+      return available.length ? { id: def.id, label: def.label, groups: available, count: available.reduce((sum, name) => sum + groups[name].length, 0) } : null;
+    }).filter(Boolean);
+    Object.keys(groups).filter((name) => !used.has(name)).sort().forEach((name) => categories.push({ id: "extra:" + name, label: name, groups: [name], count: groups[name].length }));
+    return categories;
+  }
+  function settingsCategoryForGroup(categories, group) {
+    return categories.find((category) => category.groups.includes(group)) || categories[0];
   }
   function settingHelp(s) {
     return s.help ? '<span class="setting-info" tabindex="0" role="img" aria-label="' + attr(s.help) + '" title="' + attr(s.help) + '">i</span>' : "";
@@ -1564,23 +2080,44 @@
   function settingLabel(s) {
     return '<label class="setting-label"><span>' + esc(s.label) + "</span>" + settingHelp(s) + "</label>";
   }
+  function settingCategoryButton(category, activeCategory) {
+    const active = category.id === activeCategory?.id;
+    return '<button type="button" role="tab" aria-selected="' + (active ? "true" : "false") + '" tabindex="' + (active ? "0" : "-1") + '" data-setting-category="' + attr(category.id) + '" class="' + (active ? "active" : "") + '">' + esc(category.label + " (" + category.count + ")") + "</button>";
+  }
+  function renderSettingsSubnav(category, groups) {
+    const target = document.getElementById("settingsSubnav");
+    if (!target) return;
+    if (!category || category.groups.length < 2) {
+      target.hidden = true;
+      target.innerHTML = "";
+      return;
+    }
+    target.hidden = false;
+    target.innerHTML = "<label><span>" + esc(category.label) + ' section</span><select id="settingsSubgroupSelect">' + category.groups.map((name) => '<option value="' + attr(name) + '" ' + (name === state.settingsGroup ? "selected" : "") + ">" + esc(name + " (" + groups[name].length + ")") + "</option>").join("") + "</select></label>";
+    document.getElementById("settingsSubgroupSelect").onchange = (e) => {
+      state.settingsGroup = e.target.value;
+      renderSettings();
+    };
+  }
+  function bindSettingsTabs(categories) {
+    document.querySelectorAll("#settingsTabs [data-setting-category]").forEach((b) => b.onclick = () => {
+      const category = categories.find((item) => item.id === b.dataset.settingCategory);
+      if (!category) return;
+      if (!category.groups.includes(state.settingsGroup)) state.settingsGroup = category.groups[0];
+      renderSettings();
+    });
+  }
   function renderSettings() {
     const groups = {};
     state.settings.forEach((s) => (groups[s.group] ??= []).push(s));
-    const names = orderedSettingsGroups(groups);
-    if (!state.settingsGroup || !groups[state.settingsGroup]) state.settingsGroup = groups.Agents ? "Agents" : names[0];
-    document.getElementById("settingsTabs").innerHTML = names.map((name) => '<button data-setting-tab="' + attr(name) + '" class="' + (name === state.settingsGroup ? "active" : "") + '">' + esc(name) + " (" + groups[name].length + ")</button>").join("");
-    document.querySelectorAll("[data-setting-tab]").forEach((b) => b.onclick = () => {
-      state.settingsGroup = b.dataset.settingTab;
-      renderSettings();
-    });
+    const categories = settingsCategories(groups);
+    if (!state.settingsGroup || !groups[state.settingsGroup]) state.settingsGroup = groups.Agents ? "Agents" : categories[0]?.groups[0];
+    const activeCategory = settingsCategoryForGroup(categories, state.settingsGroup);
+    document.getElementById("settingsTabs").innerHTML = categories.map((category) => settingCategoryButton(category, activeCategory)).join("");
+    renderSettingsSubnav(activeCategory, groups);
     const items = groups[state.settingsGroup] || [];
-    const nav = state.settingsGroup === "Agents" || agentSettingGroups.includes(state.settingsGroup) ? agentSettingsNav(state.settingsGroup) : "";
-    document.getElementById("settingsForm").innerHTML = '<div class="settings-section"><h2>' + esc(state.settingsGroup || "Settings") + '</h2><div id="settingsRestartBanner"></div>' + nav + items.map((s) => '<div class="setting" data-setting-box="' + attr(s.key) + '" data-restart-required="' + (s.restartRequired ? "true" : "false") + '">' + settingLabel(s) + settingInput(s) + "<small>" + esc(s.key) + " - " + esc(s.description) + (s.effectiveValue ? " Active: " + esc(s.effectiveValue) + "." : "") + (s.restartRequired ? " Restart required." : "") + (s.configured ? " Saved in env file." : " Using default.") + '</small><div class="setting-actions"><button type="button" class="secondary" data-reset-setting="' + attr(s.key) + '">Use default</button>' + (s.kind === "secret" ? '<button type="button" class="secondary" data-reveal-setting="' + attr(s.key) + '">Reveal/replace</button>' : "") + '</div><div class="setting-error"></div></div>').join("") + "</div>";
-    document.querySelectorAll("[data-setting-tab]").forEach((b) => b.onclick = () => {
-      state.settingsGroup = b.dataset.settingTab;
-      renderSettings();
-    });
+    document.getElementById("settingsForm").innerHTML = '<div class="settings-section"><h2>' + esc(state.settingsGroup || "Settings") + '</h2><div id="settingsRestartBanner"></div>' + items.map((s) => '<div class="setting" data-setting-box="' + attr(s.key) + '" data-restart-required="' + (s.restartRequired ? "true" : "false") + '">' + settingLabel(s) + settingInput(s) + "<small>" + esc(s.key) + " - " + esc(s.description) + (s.effectiveValue ? " Active: " + esc(s.effectiveValue) + "." : "") + (s.restartRequired ? " Restart required." : "") + (s.configured ? " Saved in env file." : " Using default.") + '</small><div class="setting-actions"><button type="button" class="secondary" data-reset-setting="' + attr(s.key) + '">Use default</button>' + (s.kind === "secret" ? '<button type="button" class="secondary" data-reveal-setting="' + attr(s.key) + '">Reveal/replace</button>' : "") + '</div><div class="setting-error"></div></div>').join("") + "</div>";
+    bindSettingsTabs(categories);
     bindSettingsUx();
   }
   function settingAttrs(s, original) {
@@ -2060,9 +2597,10 @@
     loadLocks();
   });
   function auditQuery() {
-    return { limit: val("auditLimit") || "50", channel: val("auditChannel") || "all", category: val("auditCategory") || "all", status: val("auditStatus") || "all", actor: val("auditActor") || void 0, agent: val("auditAgent") || "all", thread: val("auditThread") || void 0, workspace: val("auditWorkspace") || void 0, since: val("auditSince") || void 0 };
+    return { limit: val("auditLimit") || "50", cursor: auditPager.cursor || void 0, channel: val("auditChannel") || "all", category: val("auditCategory") || "all", status: val("auditStatus") || "all", actor: val("auditActor") || void 0, agent: val("auditAgent") || "all", thread: val("auditThread") || void 0, workspace: val("auditWorkspace") || void 0, since: val("auditSince") || void 0 };
   }
-  async function loadAudit() {
+  async function loadAudit(reset = true) {
+    if (reset) auditPager.reset();
     if (!can("audit.read")) {
       document.getElementById("auditList").innerHTML = '<div class="item">Permission required: audit.read</div>';
       return;
@@ -2070,6 +2608,7 @@
     const d = await api("/api/audit", { query: auditQuery() });
     state.auditEvents = d.events || [];
     renderAudit(state.auditEvents);
+    auditPager.render(d.pagination || {});
   }
   function renderAudit(events) {
     document.getElementById("auditList").innerHTML = (events || []).map((e) => {
@@ -2078,7 +2617,7 @@
       return '<div class="item"><strong>' + esc([fmtDate(e.timestamp), e.channelId, e.status, e.category, e.action].filter(Boolean).join(" | ")) + "</strong><small>" + esc("Actor: " + actor) + "</small>" + (meta ? "<small>" + esc(meta) + "</small>" : "") + "<small>" + esc(e.description || e.detail || "") + "</small></div>";
     }).join("") || '<div class="item">No audit events.</div>';
   }
-  document.getElementById("loadAuditBtn").onclick = () => loadAudit();
+  document.getElementById("loadAuditBtn").onclick = () => loadAudit(true);
   document.getElementById("exportAuditBtn").onclick = () => {
     const events = state.auditEvents || [];
     const text = events.map((e) => [fmtDate(e.timestamp), e.channelId, e.status, e.category, e.action, e.actor?.label || e.actor?.username || e.actor?.id || e.actorId || "system", e.contextKey, e.agentId || "", e.threadId || "", e.workspace || "", e.description || e.detail || ""].join("\\t")).join("\\n");
@@ -2099,22 +2638,32 @@
     if (document.getElementById("logFollow").checked) document.getElementById("logs").scrollTop = document.getElementById("logs").scrollHeight;
   }
   document.getElementById("loadLogsBtn").onclick = loadLogs;
-  function logLevelOf(line) {
-    if (line.includes(" ERROR ")) return "ERROR";
-    if (line.includes(" WARN ")) return "WARN";
-    if (line.includes(" INFO ")) return "INFO";
-    return "";
+  function explicitLogLevelOf(line) {
+    const m = String(line || "").match(/^\s*(?:\[[^\]]+\]|\d{4}-\d{2}-\d{2}[ T]\d{2}:\d{2}:\d{2}(?:\s+[+-]\d{2}:?\d{2})?)?\s*(ERROR|WARN|INFO)\b/);
+    return m ? m[1] : "";
   }
   function logTimeOf(line) {
-    const m = line.match(/^(\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2})/);
+    const text = String(line || "");
+    const m = text.match(/^\s*\[?(\d{4}-\d{2}-\d{2}[ T]\d{2}:\d{2}:\d{2})(?:\s+[+-]\d{2}:?\d{2})?\]?/);
     return m ? new Date(m[1].replace(" ", "T")).getTime() : 0;
   }
+  function parsedLogLines() {
+    let currentLevel = "INFO";
+    let currentTime = 0;
+    return state.logsPlain.split(/\n/).filter((line) => line.length > 0).map((line) => {
+      const explicit = explicitLogLevelOf(line);
+      if (explicit) currentLevel = explicit;
+      const time = logTimeOf(line);
+      if (time) currentTime = time;
+      return { line, level: currentLevel, time: currentTime };
+    });
+  }
   function renderLogs() {
     const level = val("logLevel");
     const query = val("logSearch").toLowerCase();
     const since = val("logSince") ? new Date(val("logSince")).getTime() : 0;
-    const lines = state.logsPlain.split(/\\n/).filter((line) => line.length > 0 && (level === "all" || line.includes(level)) && (!query || line.toLowerCase().includes(query)) && (!since || !logTimeOf(line) || logTimeOf(line) >= since));
-    document.getElementById("logs").innerHTML = lines.map((line) => '<span class="log-line ' + logLevelOf(line) + '">' + esc(line) + "</span>").join("") || "(empty)";
+    const lines = parsedLogLines().filter((entry) => (level === "all" || entry.level === level) && (!query || entry.line.toLowerCase().includes(query)) && (!since || !entry.time || entry.time >= since));
+    document.getElementById("logs").innerHTML = lines.map((entry) => '<span class="log-line ' + entry.level + '">' + esc(entry.line) + "</span>").join("") || "(empty)";
   }
   document.getElementById("logLevel").onchange = renderLogs;
   document.getElementById("logSearch").oninput = renderLogs;
@@ -2151,14 +2700,17 @@
       return;
     }
     setLoading("peersList", "Loading peers...");
-    const d = await api("/api/peers", { local: true });
+    const [d, jobsData] = await Promise.all([api("/api/peers", { local: true }), can("peers.connect") ? api("/api/peers/discovery-jobs", { local: true }).catch(() => ({ jobs: [] })) : Promise.resolve({ jobs: [] })]);
     state.peers = d;
+    state.peerDiscoveryJobs = jobsData.jobs || [];
     const inviteIds = new Set((d.invitations || []).map((i) => i.id));
     Object.keys(state.peerInviteSecrets || {}).forEach((id) => {
       if (!inviteIds.has(id)) delete state.peerInviteSecrets[id];
     });
     document.getElementById("peerStatus").innerHTML = peerStatusHtml(d);
     document.getElementById("peersList").innerHTML = (d.peers || []).map(peerCard).join("") || '<div class="item">No peers configured.</div>';
+    document.getElementById("peerDiscovery").innerHTML = peerDiscoveryJobsHtml(state.peerDiscoveryJobs);
+    bindUiCopyButtons(document.getElementById("peerDiscovery"));
     document.getElementById("peerInvites").innerHTML = (d.invitations || []).map(peerInviteCard).join("") || '<div class="item">No open invitations.</div>';
     ensureGlobalPeerSessionsPanel();
     bindPeerButtons();
@@ -2167,8 +2719,9 @@
   }
   function openPeerAddDialog() {
     const publicUrl = state.peers?.enabled ? state.peers?.listenUrl || "" : "";
-    adminDialog("Add peer", '<label>Peer URL<input id="dlgPeerAddUrl" placeholder="https://host:31979"></label><label>Pairing code<input id="dlgPeerAddCode"></label><label>Name<input id="dlgPeerAddName" placeholder="optional local label"></label><label>Public URL for this node<input id="dlgPeerAddPublicUrl" placeholder="optional" value="' + attr(publicUrl) + '"></label>', async () => {
+    adminDialog("Add peer", '<label>Peer URL<input id="dlgPeerAddUrl" placeholder="https://host:31979"></label><label>Pairing code<input id="dlgPeerAddCode"></label><label>Name<input id="dlgPeerAddName" placeholder="optional local label"></label><label>Group<input id="dlgPeerAddGroup" placeholder="LAN, Servers, Workstations"></label><label>Public URL for this node<input id="dlgPeerAddPublicUrl" placeholder="optional" value="' + attr(publicUrl) + '"></label>', async () => {
       const r = await api("/api/peers/pair", { method: "POST", body: JSON.stringify({ url: val("dlgPeerAddUrl"), code: val("dlgPeerAddCode"), name: val("dlgPeerAddName") || void 0, publicUrl: val("dlgPeerAddPublicUrl") || void 0 }), local: true });
+      if (val("dlgPeerAddGroup") && r.peer?.id) await api("/api/peers/" + encodeURIComponent(r.peer.id), { method: "PATCH", body: JSON.stringify({ group: val("dlgPeerAddGroup") }), local: true });
       toast("Added peer " + (r.peer?.name || ""));
       await loadPeers();
     });
@@ -2188,6 +2741,10 @@
     }
     openPeerAddDialog();
   };
+  document.getElementById("discoverPeersBtn").onclick = () => safe(discoverPeers);
+  document.getElementById("cancelPeerDiscoveryBtn").onclick = () => safe(cancelPeerDiscovery);
+  document.getElementById("exportPeerIdentityBtn").onclick = () => safe(exportPeerIdentity);
+  document.getElementById("restorePeerIdentityBtn").onclick = () => safe(restorePeerIdentity);
   async function loadAdapterHealth() {
     setLoading("adapterHealth", "Loading adapters...");
     setLoading("adapterConformance", "Loading conformance...");
@@ -2350,6 +2907,37 @@
     }));
   }
   document.getElementById("loadVersionBtn").onclick = () => loadVersion();
+  document.addEventListener("click", (e) => {
+    const b = e.target.closest?.("[data-peer-repin]");
+    if (!b) return;
+    safe(async () => {
+      if (!can("peers.write")) {
+        toast("Permission required: peers.write");
+        return;
+      }
+      if (confirm("Re-pin TLS fingerprint for this peer?")) {
+        const r = await api("/api/peers/" + encodeURIComponent(b.dataset.peerRepin) + "/repin", { method: "POST", local: true });
+        toast("TLS fingerprint updated: " + (r.peer?.tlsFingerprint || "-"), { duration: 8e3 });
+        loadPeers();
+      }
+    });
+  });
+  document.addEventListener("click", (e) => {
+    const b = e.target.closest?.("[data-peer-rotate]");
+    if (!b) return;
+    safe(async () => {
+      if (!can("peers.write")) {
+        toast("Permission required: peers.write");
+        return;
+      }
+      if (confirm("Create a new pairing invite for this peer using the current scopes?")) {
+        const r = await api("/api/peers/" + encodeURIComponent(b.dataset.peerRotate) + "/rotate", { method: "POST", body: JSON.stringify({ expiresMinutes: 10 }), local: true });
+        if (r.invitation?.id) state.peerInviteSecrets[r.invitation.id] = { code: r.code || "", command: r.command || "" };
+        toast("Rotation invite created. Pairing details are shown under Open invitations.", { duration: 8e3 });
+        loadPeers();
+      }
+    });
+  });
   document.getElementById("updateBtn").onclick = () => safe(async () => {
     if (!can("updates.run")) {
       toast("Permission required: updates.run");
@@ -2429,6 +3017,92 @@
     const command = r.manualCheckCommand || "nordrelay peer check " + (d.listenUrl || "");
     return '<div class="item"><strong>Local peer identity <span class="adapter-status ' + (r.enabled && r.localListening ? "enabled" : r.enabled ? "planned" : "disabled") + '">' + esc(r.enabled ? r.localListening ? "ready" : "not listening" : "disabled") + "</span></strong>" + rows.map((row) => "<small>" + esc(row[0]) + ": " + esc(row[1] ?? "-") + "</small>").join("") + peerWarningsHtml(r.warnings || [], "Peer readiness") + '<div class="peer-invite-details"><small>Manual reachability check</small><button type="button" class="copy-id peer-invite-command" data-peer-invite-copy="' + attr(command) + '" data-peer-invite-copy-label="Peer check command copied">' + esc(command) + '</button><small>Run this on another machine to verify LAN, port-forward, or firewall reachability.</small></div><div class="row"><button id="checkPeerReachabilityBtn" class="secondary"' + disabledAttr("peers.connect") + '>Check local endpoint</button></div><div id="peerProbeResult">' + peerProbeResultHtml(state.peerProbeResult) + "</div></div>";
   }
+  async function discoverPeers() {
+    if (!can("peers.connect")) {
+      toast("Permission required: peers.connect");
+      return;
+    }
+    const target = document.getElementById("peerDiscovery");
+    target.innerHTML = loadingHtml("Starting LAN peer discovery...");
+    const body = { targets: csvToList(val("peerDiscoveryTargets")), maxHosts: Number(val("peerDiscoveryMaxHosts") || 512), concurrency: Number(val("peerDiscoveryConcurrency") || 32) };
+    const data = await api("/api/peers/discovery-jobs", { method: "POST", body: JSON.stringify(body), local: true });
+    state.activePeerDiscoveryJobId = data.job?.id;
+    await pollPeerDiscoveryJob(data.job?.id);
+  }
+  async function pollPeerDiscoveryJob(id) {
+    if (!id) return;
+    const target = document.getElementById("peerDiscovery");
+    for (; ; ) {
+      const data = await api("/api/peers/discovery-jobs/" + encodeURIComponent(id), { local: true });
+      const job = data.job;
+      if (!job) {
+        target.innerHTML = uiEmpty("Discovery job not found.");
+        return;
+      }
+      target.innerHTML = peerDiscoveryJobHtml(job);
+      bindUiCopyButtons(target);
+      applyPermissions();
+      if (!["queued", "running"].includes(job.status)) break;
+      await new Promise((r) => setTimeout(r, 1e3));
+    }
+  }
+  async function cancelPeerDiscovery() {
+    const id = state.activePeerDiscoveryJobId;
+    if (!id) {
+      toast("No active discovery job");
+      return;
+    }
+    const data = await api("/api/peers/discovery-jobs/" + encodeURIComponent(id) + "/cancel", { method: "POST", local: true });
+    if (data.job) {
+      document.getElementById("peerDiscovery").innerHTML = peerDiscoveryJobHtml(data.job);
+    }
+    toast("Discovery cancelled");
+  }
+  async function exportPeerIdentity() {
+    if (!can("peers.write")) {
+      toast("Permission required: peers.write");
+      return;
+    }
+    const data = await api("/api/peers/identity/backup", { local: true });
+    downloadJson("nordrelay-peer-identity-backup.json", data.backup);
+    toast("Peer identity backup exported");
+  }
+  async function restorePeerIdentity() {
+    if (!can("peers.write")) {
+      toast("Permission required: peers.write");
+      return;
+    }
+    const text = prompt("Paste peer identity backup JSON");
+    if (!text) return;
+    const backup = JSON.parse(text);
+    await api("/api/peers/identity/restore", { method: "POST", body: JSON.stringify({ backup }), local: true });
+    toast("Peer identity restored. Restart peer server to use it.");
+    await loadPeers();
+  }
+  function downloadJson(name, value) {
+    const blob = new Blob([JSON.stringify(value, null, 2) + "\n"], { type: "application/json" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = name;
+    a.click();
+    URL.revokeObjectURL(a.href);
+  }
+  function peerDiscoveryJobsHtml(jobs) {
+    const list = (jobs || []).slice(0, 5);
+    return list.map(peerDiscoveryJobHtml).join("") || uiEmpty("No LAN discovery jobs yet.");
+  }
+  function peerDiscoveryJobHtml(job) {
+    const progress = job.total ? Math.round(job.scanned / job.total * 100) : 0;
+    return uiItem("Discovery job " + job.id, { badge: { text: job.status, status: job.status === "completed" ? "enabled" : job.status === "failed" ? "disabled" : "planned" }, rows: [["Progress", job.scanned + " / " + job.total + " (" + progress + "%)"], ["Targets", (job.options?.targets || []).join(", ") || "local LAN + mDNS"], ["Started", fmtDate(job.startedAt)], ["Completed", fmtDate(job.completedAt)]], body: peerDiscoveryHtml(job) + '<details class="peer-health-history"><summary>Discovery log (' + (job.log || []).length + ")</summary>" + (job.log || []).slice(-30).map((line) => "<small>" + esc(line) + "</small>").join("") + "</details>" });
+  }
+  function peerDiscoveryHtml(data) {
+    const warnings = (data.warnings || []).length ? peerWarningsHtml(data.warnings, "Discovery warning") : "";
+    const cards = (data.candidates || []).map((c) => {
+      const command = "nordrelay peer add " + c.url + " --code <pairing-code>";
+      return uiItem(c.name || c.host, { badge: { text: "found", status: "enabled" }, rows: [["URL", c.url], ["Node", c.nodeId], ["Fingerprint", c.fingerprint], ["TLS", c.tlsFingerprint || "-"], ["Latency", c.latencyMs !== void 0 ? c.latencyMs + "ms" : "-"]], body: '<div class="peer-invite-details"><small>Pairing command template</small>' + uiCopyButton(command, "Peer add command copied", "copy-id peer-invite-command") + "</div>" });
+    }).join("");
+    return warnings + (cards || uiEmpty("No LAN peers found. Scanned " + (data.scanned || 0) + " endpoint candidates."));
+  }
   function peerWarningsHtml(warnings, title) {
     return (warnings || []).length ? '<div class="peer-warning full-span"><strong>' + esc(title || "Warning") + "</strong>" + warnings.map((w) => "<small>" + esc(w) + "</small>").join("") + "</div>" : "";
   }
@@ -2446,18 +3120,22 @@
   function peerInviteCard(i) {
     const open = new Date(i.expiresAt) > /* @__PURE__ */ new Date() && !i.usedAt;
     const readiness = state.peers?.readiness;
-    return '<div class="item"><strong>' + esc(i.name) + ' <span class="chip">' + esc(open ? "open" : "closed") + "</span></strong><small>" + esc("Expires: " + fmtDate(i.expiresAt)) + "</small><small>" + esc("Scopes: " + (i.scopes || []).join(", ")) + "</small><small>" + esc("Agents: " + ((i.allowedAgents || []).join(", ") || "all")) + "</small>" + (i.usedAt ? "<small>" + esc("Used: " + fmtDate(i.usedAt) + " by " + (i.usedByNodeId || "-")) + "</small>" : "") + (open ? peerWarningsHtml(readiness?.warnings || [], "Pairing warning") + peerInviteDetails(i) + '<div class="row"><button class="danger" data-peer-invite-delete="' + attr(i.id) + '"' + disabledAttr("peers.write") + ">Delete invite</button></div>" : "") + "</div>";
+    return '<div class="item"><strong>' + esc(i.name) + ' <span class="chip">' + esc(open ? "open" : "closed") + "</span></strong>" + (i.group ? "<small>" + esc("Group: " + i.group) + "</small>" : "") + "<small>" + esc("Expires: " + fmtDate(i.expiresAt)) + "</small><small>" + esc("Scopes: " + (i.scopes || []).join(", ")) + "</small><small>" + esc("Agents: " + ((i.allowedAgents || []).join(", ") || "all")) + "</small>" + (i.usedAt ? "<small>" + esc("Used: " + fmtDate(i.usedAt) + " by " + (i.usedByNodeId || "-")) + "</small>" : "") + (open ? peerWarningsHtml(readiness?.warnings || [], "Pairing warning") + peerInviteDetails(i) + '<div class="row"><button class="danger" data-peer-invite-delete="' + attr(i.id) + '"' + disabledAttr("peers.write") + ">Delete invite</button></div>" : "") + "</div>";
   }
   function peerCard(p) {
     const selected = state.selectedPeer === p.id ? ' <span class="chip">selected</span>' : "";
+    const trust = p.trustStatus || "trusted";
+    const trustClass = trust === "trusted" ? "enabled" : trust === "tls-unpinned" ? "planned" : "disabled";
     const health = p.remoteStatus || p.lastSeenAt ? "Health: " + (p.remoteStatus || "seen") + (p.lastLatencyMs !== void 0 ? " / " + p.lastLatencyMs + "ms" : "") + (p.remoteVersion ? " / v" + p.remoteVersion : "") : "Health: unchecked";
     const aliases = Object.entries(p.workspaceAliases || {}).map(([a, w]) => a + "=" + w).join(", ");
-    return '<div class="item"><strong>' + esc(p.name) + ' <span class="adapter-status ' + (p.enabled ? "enabled" : "disabled") + '">' + (p.enabled ? "enabled" : "disabled") + "</span>" + selected + "</strong><small>" + esc("URL: " + (p.url || "-")) + "</small><small>" + esc("Node: " + p.nodeId + " / " + p.fingerprint) + "</small>" + (p.tlsFingerprint ? "<small>" + esc("TLS: " + p.tlsFingerprint) + "</small>" : "") + "<small>" + esc("Direction: " + p.direction + " / scopes " + (p.scopes || []).join(", ")) + "</small><small>" + esc("Agents: " + ((p.allowedAgents || []).join(", ") || "all")) + "</small><small>" + esc("Workspaces: " + ((p.allowedWorkspaceRoots || []).join(", ") || "all")) + "</small>" + (aliases ? "<small>" + esc("Aliases: " + aliases) + "</small>" : "") + "<small>" + esc(health) + "</small>" + (p.lastCheckedAt ? "<small>" + esc("Checked: " + fmtDate(p.lastCheckedAt)) + "</small>" : "") + (p.lastSeenAt ? "<small>" + esc("Last seen: " + fmtDate(p.lastSeenAt)) + "</small>" : "") + (p.lastError ? '<small class="error">' + esc("Last error: " + p.lastError) + "</small>" : "") + '<div class="row"><button data-peer-select="' + attr(p.id) + '">Use target</button><button class="secondary" data-peer-test="' + attr(p.id) + '">Test</button><button class="secondary" data-peer-probe="' + attr(p.id) + '"' + disabledAttr("peers.connect") + '>Probe this node</button><button class="secondary" data-peer-edit="' + attr(p.id) + '"' + disabledAttr("peers.write") + '>Edit</button><button class="secondary" data-peer-toggle="' + attr(p.id) + '"' + disabledAttr("peers.write") + ">" + (p.enabled ? "Disable" : "Enable") + '</button><button class="danger" data-peer-revoke="' + attr(p.id) + '"' + disabledAttr("peers.write") + ">Revoke</button></div></div>";
+    const effective = "Effective access: " + (p.scopes || []).length + " scope(s), agents " + ((p.allowedAgents || []).join(", ") || "all") + ", workspaces " + ((p.allowedWorkspaceRoots || []).join(", ") || "all");
+    const history = (p.healthHistory || []).slice(-5).reverse().map((h) => "<small>" + esc(fmtDate(h.checkedAt) + " | " + h.status + (h.latencyMs !== void 0 ? " | " + h.latencyMs + "ms" : "") + (h.error ? " | " + h.error : "")) + "</small>").join("");
+    return '<div class="item"><strong>' + esc(p.name) + ' <span class="adapter-status ' + (p.enabled ? "enabled" : "disabled") + '">' + (p.enabled ? "enabled" : "disabled") + '</span> <span class="adapter-status ' + trustClass + '">' + esc(trust) + "</span>" + selected + "</strong>" + (p.group ? "<small>" + esc("Group: " + p.group) + "</small>" : "") + "<small>" + esc("URL: " + (p.url || "-")) + "</small><small>" + esc("Node: " + p.nodeId + " / " + p.fingerprint) + "</small>" + (p.tlsFingerprint ? "<small>" + esc("TLS: " + p.tlsFingerprint) + "</small>" : "") + (p.trustWarnings && p.trustWarnings.length ? peerWarningsHtml(p.trustWarnings, "Trust warning") : "") + "<small>" + esc("Direction: " + p.direction + " / scopes " + (p.scopes || []).join(", ")) + "</small><small>" + esc("Agents: " + ((p.allowedAgents || []).join(", ") || "all")) + "</small><small>" + esc("Workspaces: " + ((p.allowedWorkspaceRoots || []).join(", ") || "all")) + "</small>" + (aliases ? "<small>" + esc("Aliases: " + aliases) + "</small>" : "") + "<small>" + esc(effective) + "</small><small>" + esc(health) + "</small>" + (p.lastCheckedAt ? "<small>" + esc("Checked: " + fmtDate(p.lastCheckedAt)) + "</small>" : "") + (p.lastSeenAt ? "<small>" + esc("Last seen: " + fmtDate(p.lastSeenAt)) + "</small>" : "") + (p.lastError ? '<small class="error">' + esc("Last error: " + p.lastError) + "</small>" : "") + (history ? '<details class="peer-health-history"><summary>Health history (' + (p.healthHistory || []).length + ")</summary>" + history + "</details>" : "") + '<div class="row"><button data-peer-select="' + attr(p.id) + '">Use target</button><button class="secondary" data-peer-test="' + attr(p.id) + '">Test</button><button class="secondary" data-peer-probe="' + attr(p.id) + '"' + disabledAttr("peers.connect") + '>Probe this node</button><button class="secondary" data-peer-repin="' + attr(p.id) + '"' + disabledAttr("peers.write") + '>Trust TLS</button><button class="secondary" data-peer-rotate="' + attr(p.id) + '"' + disabledAttr("peers.write") + '>Rotate</button><button class="secondary" data-peer-edit="' + attr(p.id) + '"' + disabledAttr("peers.write") + '>Edit</button><button class="secondary" data-peer-toggle="' + attr(p.id) + '"' + disabledAttr("peers.write") + ">" + (p.enabled ? "Disable" : "Enable") + '</button><button class="danger" data-peer-revoke="' + attr(p.id) + '"' + disabledAttr("peers.write") + ">Revoke</button></div></div>";
   }
   function openPeerDialog(p) {
     const aliases = Object.entries(p.workspaceAliases || {}).map(([a, w]) => a + "=" + w).join(", ");
-    adminDialog("Edit peer", '<label>Name<input id="dlgPeerName" value="' + attr(p.name || "") + '"></label><label>URL<input id="dlgPeerUrl" value="' + attr(p.url || "") + '"></label><label class="checkbox"><input id="dlgPeerEnabled" type="checkbox" ' + (p.enabled ? "checked" : "") + '> Enabled</label><label class="full-span">Scopes<input id="dlgPeerScopes" value="' + attr((p.scopes || []).join(", ")) + '"></label><label class="full-span">Allowed agents<input id="dlgPeerAgents" value="' + attr((p.allowedAgents || []).join(", ")) + '"></label><label class="full-span">Allowed workspace roots<input id="dlgPeerWorkspaces" value="' + attr((p.allowedWorkspaceRoots || []).join(", ")) + '"></label><label class="full-span">Workspace aliases<input id="dlgPeerAliases" placeholder="project=/srv/project, demo=/home/me/demo" value="' + attr(aliases) + '"></label>', async () => {
-      await api("/api/peers/" + encodeURIComponent(p.id), { method: "PATCH", body: JSON.stringify({ name: val("dlgPeerName"), url: val("dlgPeerUrl"), enabled: document.getElementById("dlgPeerEnabled").checked, scopes: csvToList(val("dlgPeerScopes")), allowedAgents: csvToList(val("dlgPeerAgents")), allowedWorkspaceRoots: csvToList(val("dlgPeerWorkspaces")), workspaceAliases: aliasMap(val("dlgPeerAliases")) }), local: true });
+    adminDialog("Edit peer", '<label>Name<input id="dlgPeerName" value="' + attr(p.name || "") + '"></label><label>Group<input id="dlgPeerGroup" value="' + attr(p.group || "") + '" placeholder="LAN, Servers, Workstations"></label><label>URL<input id="dlgPeerUrl" value="' + attr(p.url || "") + '"></label><label class="checkbox"><input id="dlgPeerEnabled" type="checkbox" ' + (p.enabled ? "checked" : "") + '> Enabled</label><label class="full-span">Scopes<input id="dlgPeerScopes" value="' + attr((p.scopes || []).join(", ")) + '"></label><label class="full-span">Allowed agents<input id="dlgPeerAgents" value="' + attr((p.allowedAgents || []).join(", ")) + '"></label><label class="full-span">Allowed workspace roots<input id="dlgPeerWorkspaces" value="' + attr((p.allowedWorkspaceRoots || []).join(", ")) + '"></label><label class="full-span">Workspace aliases<input id="dlgPeerAliases" placeholder="project=/srv/project, demo=/home/me/demo" value="' + attr(aliases) + '"></label>', async () => {
+      await api("/api/peers/" + encodeURIComponent(p.id), { method: "PATCH", body: JSON.stringify({ name: val("dlgPeerName"), group: val("dlgPeerGroup"), url: val("dlgPeerUrl"), enabled: document.getElementById("dlgPeerEnabled").checked, scopes: csvToList(val("dlgPeerScopes")), allowedAgents: csvToList(val("dlgPeerAgents")), allowedWorkspaceRoots: csvToList(val("dlgPeerWorkspaces")), workspaceAliases: aliasMap(val("dlgPeerAliases")) }), local: true });
       toast("Peer updated");
       await loadPeers();
     });
@@ -2465,8 +3143,8 @@
   function openPeerInviteDialog() {
     const warnings = state.peers?.readiness?.warnings || [];
     const warningHtml = peerWarningsHtml(warnings, "Pairing warning") + (warnings.length ? '<small class="full-span">The invite can still be created, but pairing may fail until the peer endpoint is reachable.</small>' : "");
-    adminDialog("Create peer invite", warningHtml + '<label>Name<input id="dlgPeerInviteName" value="NordRelay peer"></label><label>Expires minutes<input id="dlgPeerInviteExpires" type="number" value="10" min="1" max="1440"></label><label class="full-span">Scopes<input id="dlgPeerInviteScopes" value="inspect, sessions.read, sessions.write, prompt.send, prompt.abort, queue.read, queue.write, files.read, files.write, diagnostics.read, logs.read"></label><label class="full-span">Allowed agents<input id="dlgPeerInviteAgents" value="codex, pi, hermes, openclaw, claude-code"></label><label class="full-span">Allowed workspace roots<input id="dlgPeerInviteWorkspaces" placeholder="empty means all"></label><label class="full-span">Workspace aliases<input id="dlgPeerInviteAliases" placeholder="project=/srv/project, demo=/home/me/demo"></label>', async () => {
-      const r = await api("/api/peers/invite", { method: "POST", body: JSON.stringify({ name: val("dlgPeerInviteName"), expiresMinutes: Number(val("dlgPeerInviteExpires") || 10), scopes: csvToList(val("dlgPeerInviteScopes")), allowedAgents: csvToList(val("dlgPeerInviteAgents")), allowedWorkspaceRoots: csvToList(val("dlgPeerInviteWorkspaces")), workspaceAliases: aliasMap(val("dlgPeerInviteAliases")) }), local: true });
+    adminDialog("Create peer invite", warningHtml + '<label>Name<input id="dlgPeerInviteName" value="NordRelay peer"></label><label>Group<input id="dlgPeerInviteGroup" placeholder="LAN, Servers, Workstations"></label><label>Expires minutes<input id="dlgPeerInviteExpires" type="number" value="10" min="1" max="1440"></label><label class="full-span">Scopes<input id="dlgPeerInviteScopes" value="inspect, sessions.read, sessions.write, prompt.send, prompt.abort, queue.read, queue.write, files.read, files.write, diagnostics.read, logs.read"></label><label class="full-span">Allowed agents<input id="dlgPeerInviteAgents" value="codex, pi, hermes, openclaw, claude-code"></label><label class="full-span">Allowed workspace roots<input id="dlgPeerInviteWorkspaces" placeholder="empty means all"></label><label class="full-span">Workspace aliases<input id="dlgPeerInviteAliases" placeholder="project=/srv/project, demo=/home/me/demo"></label>', async () => {
+      const r = await api("/api/peers/invite", { method: "POST", body: JSON.stringify({ name: val("dlgPeerInviteName"), group: val("dlgPeerInviteGroup") || void 0, expiresMinutes: Number(val("dlgPeerInviteExpires") || 10), scopes: csvToList(val("dlgPeerInviteScopes")), allowedAgents: csvToList(val("dlgPeerInviteAgents")), allowedWorkspaceRoots: csvToList(val("dlgPeerInviteWorkspaces")), workspaceAliases: aliasMap(val("dlgPeerInviteAliases")) }), local: true });
       if (r.invitation?.id) state.peerInviteSecrets[r.invitation.id] = { code: r.code || "", command: r.command || "" };
       toast("Peer invite created. Pairing details are shown under Open invitations.", { duration: 8e3 });
       await loadPeers();
@@ -2542,6 +3220,459 @@
       }
     }));
   }
+  const ACCESS_USER_PAGE_SIZE = 20;
+  const ACCESS_PERMISSION_GROUPS = [
+    ["Overview", ["inspect"]],
+    ["Sessions", ["sessions.read", "sessions.write", "prompt.send", "prompt.abort", "queue.read", "queue.write"]],
+    ["Files", ["files.read", "files.write"]],
+    ["Operations", ["settings.read", "settings.write", "auth.manage", "diagnostics.read", "logs.read", "logs.clear", "updates.run", "system.restart"]],
+    ["Users and audit", ["users.read", "users.write", "audit.read"]],
+    ["Peers", ["peers.read", "peers.write", "peers.connect"]]
+  ];
+  function ensureAccessUiState() {
+    if (!state.userFilters) state.userFilters = { query: "", status: "all", group: "all", identity: "all" };
+    if (!state.userPage) state.userPage = 1;
+    if (!state.userPageSize) state.userPageSize = ACCESS_USER_PAGE_SIZE;
+    if (!state.userDetailAudit) state.userDetailAudit = {};
+  }
+  function groupIdsForUser(u) {
+    return (u.groups || []).map((g) => g.id);
+  }
+  function groupNamesForUser(u) {
+    return (u.groups || []).map((g) => g.name).join(", ") || "-";
+  }
+  function hasUserIdentity(u, kind) {
+    if (kind === "telegram") return (u.telegramIdentities || []).length > 0;
+    if (kind === "discord") return (u.discordIdentities || []).length > 0;
+    if (kind === "slack") return (u.slackIdentities || []).length > 0;
+    if (kind === "web") return (u.webSessions || []).length > 0;
+    if (kind === "unlinked") return !hasUserIdentity(u, "telegram") && !hasUserIdentity(u, "discord") && !hasUserIdentity(u, "slack");
+    return true;
+  }
+  function userSearchText(u) {
+    return [u.displayName, u.email, u.id, groupNamesForUser(u), (u.telegramIdentities || []).map((i) => [i.telegramUserId, i.username].join(" ")).join(" "), (u.discordIdentities || []).map((i) => [i.discordUserId, i.username, i.globalName].join(" ")).join(" "), (u.slackIdentities || []).map((i) => [i.slackUserId, i.teamId, i.username, i.realName].join(" ")).join(" ")].join(" ").toLowerCase();
+  }
+  function filteredUsers() {
+    ensureAccessUiState();
+    const filters = state.userFilters;
+    const query = (filters.query || "").toLowerCase().trim();
+    return (state.userManagement?.users || []).filter((u) => {
+      if (filters.status === "active" && !u.active) return false;
+      if (filters.status === "disabled" && u.active) return false;
+      if (filters.group && filters.group !== "all" && !groupIdsForUser(u).includes(filters.group)) return false;
+      if (filters.identity && filters.identity !== "all" && !hasUserIdentity(u, filters.identity)) return false;
+      if (query && !userSearchText(u).includes(query)) return false;
+      return true;
+    });
+  }
+  function renderUserGroupFilter() {
+    const select = document.getElementById("userGroupFilter");
+    if (!select) return;
+    const current = state.userFilters?.group || "all";
+    select.innerHTML = '<option value="all">All groups</option>' + (state.userManagement?.groups || []).map((g) => '<option value="' + attr(g.id) + '">' + esc(g.name) + "</option>").join("");
+    select.value = current;
+  }
+  function bindAccessFilters() {
+    ensureAccessUiState();
+    const search = document.getElementById("userSearch");
+    if (search && !search.dataset.bound) {
+      search.dataset.bound = "true";
+      search.oninput = () => {
+        state.userFilters.query = search.value;
+        state.userPage = 1;
+        renderUsersList();
+      };
+    }
+    if (search) search.value = state.userFilters.query || "";
+    const status = document.getElementById("userStatusFilter");
+    if (status && !status.dataset.bound) {
+      status.dataset.bound = "true";
+      status.onchange = () => {
+        state.userFilters.status = status.value;
+        state.userPage = 1;
+        renderUsersList();
+      };
+    }
+    if (status) status.value = state.userFilters.status || "all";
+    const group = document.getElementById("userGroupFilter");
+    if (group && !group.dataset.bound) {
+      group.dataset.bound = "true";
+      group.onchange = () => {
+        state.userFilters.group = group.value;
+        state.userPage = 1;
+        renderUsersList();
+      };
+    }
+    if (group) group.value = state.userFilters.group || "all";
+    const identity = document.getElementById("userIdentityFilter");
+    if (identity && !identity.dataset.bound) {
+      identity.dataset.bound = "true";
+      identity.onchange = () => {
+        state.userFilters.identity = identity.value;
+        state.userPage = 1;
+        renderUsersList();
+      };
+    }
+    if (identity) identity.value = state.userFilters.identity || "all";
+    const groupSearch = document.getElementById("groupSearch");
+    if (groupSearch && !groupSearch.dataset.bound) {
+      groupSearch.dataset.bound = "true";
+      groupSearch.oninput = () => renderGroupsList();
+    }
+    const telegramSearch = document.getElementById("telegramChatSearch");
+    if (telegramSearch && !telegramSearch.dataset.bound) {
+      telegramSearch.dataset.bound = "true";
+      telegramSearch.oninput = () => renderTelegramChats();
+    }
+  }
+  function switchAccessTabV2(tab) {
+    state.accessTab = tab || "users";
+    document.querySelectorAll("[data-access-tab]").forEach((b) => {
+      const active = b.dataset.accessTab === state.accessTab;
+      b.classList.toggle("active", active);
+      b.setAttribute("aria-selected", active ? "true" : "false");
+      b.tabIndex = active ? 0 : -1;
+    });
+    document.querySelectorAll("[data-access-tab-panel]").forEach((panel) => panel.classList.toggle("active", panel.dataset.accessTabPanel === state.accessTab));
+    bindAccessFilters();
+  }
+  function bindAccessTabsV2() {
+    document.querySelectorAll("[data-access-tab]").forEach((b) => b.onclick = () => switchAccessTabV2(b.dataset.accessTab));
+    bindAccessFilters();
+    const discordSearch = document.getElementById("discordChannelSearch");
+    if (discordSearch && !discordSearch.dataset.bound) {
+      discordSearch.dataset.bound = "true";
+      discordSearch.oninput = () => renderDiscordChannelsV2();
+    }
+    const slackSearch = document.getElementById("slackChannelSearch");
+    if (slackSearch && !slackSearch.dataset.bound) {
+      slackSearch.dataset.bound = "true";
+      slackSearch.oninput = () => renderSlackChannelsV2();
+    }
+  }
+  function renderUserManagementV2(d) {
+    ensureAccessUiState();
+    state.userManagement = d;
+    renderUserGroupFilter();
+    bindAccessFilters();
+    renderUsersList();
+    renderGroupsList();
+    renderTelegramChats();
+    renderDiscordChannelsV2(d.discordChannels || []);
+    renderSlackChannelsV2(d.slackChannels || []);
+    bindUserButtonsV2();
+    bindSlackUserButtons();
+    bindAccessCopyButtons();
+    applyPermissions();
+  }
+  function userIdentityChips(u) {
+    const chips = [];
+    const telegram = (u.telegramIdentities || []).length;
+    const discord = (u.discordIdentities || []).length;
+    const slack = (u.slackIdentities || []).length;
+    const web = (u.webSessions || []).length;
+    if (telegram) chips.push('<span class="chip">Telegram ' + telegram + "</span>");
+    if (discord) chips.push('<span class="chip">Discord ' + discord + "</span>");
+    if (slack) chips.push('<span class="chip">Slack ' + slack + "</span>");
+    if (web) chips.push('<span class="chip">Web ' + web + "</span>");
+    return chips.join("") || '<span class="chip">No chat identity</span>';
+  }
+  function effectivePermissions(u) {
+    return Array.from(new Set((u.groups || []).flatMap((g) => g.permissions || []))).sort();
+  }
+  function scopedUnion(u, key) {
+    const groups = u.groups || [];
+    if (groups.some((g) => (g[key] || []).length === 0)) return ["all"];
+    return Array.from(new Set(groups.flatMap((g) => g[key] || []))).sort();
+  }
+  function userCard(u) {
+    const groups = (u.groups || []).map((g) => '<span class="chip">' + esc(g.name) + "</span>").join("") || '<span class="chip">No groups</span>';
+    const perms = effectivePermissions(u);
+    return '<div class="item user-card"><div class="user-card-main"><div><strong>' + esc(u.displayName) + ' <span class="adapter-status ' + (u.active ? "enabled" : "disabled") + '">' + (u.active ? "active" : "disabled") + "</span></strong><small>" + esc(u.email) + '</small><small class="access-id-row">User ID: ' + accessCopyButton(u.id, "User ID copied") + '</small></div><div class="user-card-meta">' + groups + userIdentityChips(u) + "</div></div><small>" + esc(perms.length + " permissions \xB7 agents " + scopedUnion(u, "agentIds").join(", ") + " \xB7 workspaces " + scopedUnion(u, "workspaceRoots").join(", ")) + '</small><div class="row"><button data-user-detail="' + attr(u.id) + '">Details</button><button class="secondary" data-user-edit="' + attr(u.id) + '"' + disabledAttr("users.write") + '>Edit</button><button class="secondary" data-user-toggle="' + attr(u.id) + '"' + disabledAttr("users.write") + ">" + (u.active ? "Disable" : "Enable") + "</button></div></div>";
+  }
+  function renderUsersList() {
+    const target = document.getElementById("accessPanel");
+    if (!target) return;
+    const users = filteredUsers();
+    const pages = Math.max(1, Math.ceil(users.length / (state.userPageSize || ACCESS_USER_PAGE_SIZE)));
+    if (state.userPage > pages) state.userPage = pages;
+    const start = (state.userPage - 1) * (state.userPageSize || ACCESS_USER_PAGE_SIZE);
+    const pageUsers = users.slice(start, start + (state.userPageSize || ACCESS_USER_PAGE_SIZE));
+    target.innerHTML = pageUsers.map(userCard).join("") || '<div class="item">No users match the current filters.</div>';
+    renderUsersPager(users.length, pages);
+    bindUserButtonsV2();
+    bindAccessCopyButtons();
+    applyPermissions();
+  }
+  function renderUsersPager(total, pages) {
+    const pager = document.getElementById("usersPager");
+    if (!pager) return;
+    const start = total ? (state.userPage - 1) * (state.userPageSize || ACCESS_USER_PAGE_SIZE) + 1 : 0;
+    const end = Math.min(total, state.userPage * (state.userPageSize || ACCESS_USER_PAGE_SIZE));
+    pager.innerHTML = "<span>" + esc(start + "-" + end + " of " + total + " users \xB7 page " + state.userPage + " of " + pages) + '</span><div class="pager-actions"><button data-user-page="prev" ' + (state.userPage <= 1 ? "disabled" : "") + '>Previous</button><button data-user-page="next" ' + (state.userPage >= pages ? "disabled" : "") + ">Next</button></div>";
+    pager.querySelector('[data-user-page="prev"]').onclick = () => {
+      if (state.userPage > 1) {
+        state.userPage -= 1;
+        renderUsersList();
+      }
+    };
+    pager.querySelector('[data-user-page="next"]').onclick = () => {
+      if (state.userPage < pages) {
+        state.userPage += 1;
+        renderUsersList();
+      }
+    };
+  }
+  function renderGroupsList() {
+    const target = document.getElementById("groupsList");
+    if (!target) return;
+    const query = (document.getElementById("groupSearch")?.value || "").toLowerCase();
+    const groups = (state.userManagement?.groups || []).filter((g) => !query || [g.name, g.id, g.description, (g.permissions || []).join(" ")].join(" ").toLowerCase().includes(query));
+    target.innerHTML = groups.map((g) => {
+      const users = (state.userManagement?.users || []).filter((u) => groupIdsForUser(u).includes(g.id)).length;
+      return '<div class="item group-card"><strong>' + esc(g.name) + " " + (g.system ? '<span class="chip">system</span>' : "") + "</strong><small>" + esc(g.description || "") + "</small><small>" + esc(users + " user(s) \xB7 " + (g.permissions || []).length + " permission(s)") + "</small><small>Agent scope: " + esc(csv(g.agentIds) || "all") + "</small><small>Workspace scope: " + esc(csv(g.workspaceRoots) || "all") + "</small><small>Channels: " + esc(["Telegram " + (csv(g.telegramChatIds) || "all"), "Discord " + (discordScopeLabel(g.discordChannelIds) || "all"), "Slack " + (slackScopeLabel(g.slackChannelIds) || "all")].join(" \xB7 ")) + '</small><div class="row"><button class="secondary" data-group-edit="' + attr(g.id) + '"' + disabledAttr("users.write") + ">Edit group</button></div></div>";
+    }).join("") || '<div class="item">No groups match the current filters.</div>';
+    bindUserButtonsV2();
+    applyPermissions();
+  }
+  function renderTelegramChats(chats = state.userManagement?.telegramChats || []) {
+    const target = document.getElementById("telegramChatsList");
+    if (!target) return;
+    const query = (document.getElementById("telegramChatSearch")?.value || "").toLowerCase();
+    const filtered = (chats || []).filter((c) => !query || [c.title, c.chatId, c.type, groupNames(c.allowedGroupIds)].filter(Boolean).join(" ").toLowerCase().includes(query));
+    target.innerHTML = filtered.map((c) => '<div class="item"><strong>' + esc(c.title || String(c.chatId)) + ' <span class="adapter-status ' + (c.enabled ? "enabled" : "disabled") + '">' + (c.enabled ? "enabled" : "disabled") + '</span></strong><small class="access-id-row">Chat ID: ' + accessCopyButton(String(c.chatId), "Telegram chat ID copied") + "</small><small>" + esc("Type: " + (c.type || "-")) + "</small><small>Groups: " + esc(groupNames(c.allowedGroupIds) || "all groups") + '</small><div class="row"><button data-chat-edit="' + attr(c.id) + '"' + disabledAttr("users.write") + '>Edit</button><button class="secondary" data-chat-toggle="' + attr(c.id) + '"' + disabledAttr("users.write") + ">" + (c.enabled ? "Disable" : "Enable") + "</button></div></div>").join("") || '<div class="item">No Telegram group chats registered.</div>';
+    bindUserButtonsV2();
+    bindAccessCopyButtons();
+    applyPermissions();
+  }
+  function renderDiscordChannelsV2(channels = state.userManagement?.discordChannels || []) {
+    const target = document.getElementById("discordChannelsList");
+    if (!target) return;
+    const query = (document.getElementById("discordChannelSearch")?.value || "").toLowerCase();
+    const filtered = (channels || []).filter((c) => !query || [c.title, c.channelId, c.guildId, c.type, groupNames(c.allowedGroupIds)].filter(Boolean).join(" ").toLowerCase().includes(query));
+    target.innerHTML = filtered.map((c) => '<div class="item"><strong>' + esc(c.title || String(c.channelId)) + ' <span class="adapter-status ' + (c.enabled ? "enabled" : "disabled") + '">' + (c.enabled ? "enabled" : "disabled") + '</span></strong><small class="access-id-row">Channel ID: ' + accessCopyButton(c.channelId, "Discord channel ID copied") + '</small><small class="access-id-row">Guild ID: ' + accessCopyButton(c.guildId || "", "Discord guild ID copied") + "</small><small>" + esc("Type: " + (c.type || "-")) + "</small><small>Groups: " + esc(groupNames(c.allowedGroupIds) || "all groups") + '</small><div class="row"><button data-discord-channel-edit="' + attr(c.id) + '"' + disabledAttr("users.write") + '>Edit</button><button class="secondary" data-discord-channel-toggle="' + attr(c.id) + '"' + disabledAttr("users.write") + ">" + (c.enabled ? "Disable" : "Enable") + "</button></div></div>").join("") || '<div class="item">No Discord channels registered.</div>';
+    bindDiscordChannelButtons();
+    bindAccessCopyButtons();
+    applyPermissions();
+  }
+  function renderSlackChannelsV2(channels = state.userManagement?.slackChannels || []) {
+    const target = document.getElementById("slackChannelsList");
+    if (!target) return;
+    const query = (document.getElementById("slackChannelSearch")?.value || "").toLowerCase();
+    const filtered = (channels || []).filter((c) => !query || [c.title, c.channelId, c.teamId, c.type, groupNames(c.allowedGroupIds)].filter(Boolean).join(" ").toLowerCase().includes(query));
+    target.innerHTML = filtered.map((c) => '<div class="item"><strong>' + esc(c.title || String(c.channelId)) + ' <span class="adapter-status ' + (c.enabled ? "enabled" : "disabled") + '">' + (c.enabled ? "enabled" : "disabled") + '</span></strong><small class="access-id-row">Channel ID: ' + accessCopyButton(c.channelId, "Slack channel ID copied") + '</small><small class="access-id-row">Team ID: ' + accessCopyButton(c.teamId || "", "Slack team ID copied") + "</small><small>" + esc("Type: " + (c.type || "-")) + "</small><small>Groups: " + esc(groupNames(c.allowedGroupIds) || "all groups") + '</small><div class="row"><button data-slack-channel-edit="' + attr(c.id) + '"' + disabledAttr("users.write") + '>Edit</button><button class="secondary" data-slack-channel-toggle="' + attr(c.id) + '"' + disabledAttr("users.write") + ">" + (c.enabled ? "Disable" : "Enable") + "</button></div></div>").join("") || '<div class="item">No Slack channels registered.</div>';
+    bindSlackChannelButtons();
+    bindAccessCopyButtons();
+    applyPermissions();
+  }
+  function bindUserButtonsV2() {
+    document.querySelectorAll("[data-user-detail]").forEach((b) => b.onclick = () => safe(() => openUserDetail(b.dataset.userDetail)));
+    document.querySelectorAll("[data-user-edit]").forEach((b) => b.onclick = () => {
+      const u = (state.userManagement?.users || []).find((x) => x.id === b.dataset.userEdit);
+      if (u) openUserDialog(u);
+    });
+    document.querySelectorAll("[data-user-toggle]").forEach((b) => b.onclick = () => safe(async () => {
+      const u = (state.userManagement?.users || []).find((x) => x.id === b.dataset.userToggle);
+      if (!u) return;
+      await api("/api/users/" + encodeURIComponent(u.id), { method: "PATCH", body: JSON.stringify({ active: !u.active }) });
+      toast("User updated");
+      loadAccess();
+    }));
+    document.querySelectorAll("[data-user-code]").forEach((b) => b.onclick = () => safe(() => showLinkCodeDialog("telegram", b.dataset.userCode)));
+    document.querySelectorAll("[data-user-link]").forEach((b) => b.onclick = () => openTelegramLinkDialog(b.dataset.userLink));
+    document.querySelectorAll("[data-user-discord-code]").forEach((b) => b.onclick = () => safe(() => showLinkCodeDialog("discord", b.dataset.userDiscordCode)));
+    document.querySelectorAll("[data-user-discord-link]").forEach((b) => b.onclick = () => openDiscordLinkDialog(b.dataset.userDiscordLink));
+    document.querySelectorAll("[data-user-slack-code]").forEach((b) => b.onclick = () => safe(() => showLinkCodeDialog("slack", b.dataset.userSlackCode)));
+    document.querySelectorAll("[data-user-slack-link]").forEach((b) => b.onclick = () => openSlackLinkDialog(b.dataset.userSlackLink));
+    document.querySelectorAll("[data-user-password]").forEach((b) => b.onclick = () => openPasswordDialog(b.dataset.userPassword));
+    document.querySelectorAll("[data-user-revoke]").forEach((b) => b.onclick = () => safe(async () => {
+      if (confirm("Revoke all web sessions for this user?")) {
+        await api("/api/users/" + encodeURIComponent(b.dataset.userRevoke) + "/sessions", { method: "DELETE" });
+        toast("Sessions revoked");
+        loadAccess();
+      }
+    }));
+    document.querySelectorAll("[data-user-session-revoke]").forEach((b) => b.onclick = () => safe(async () => {
+      if (confirm("Revoke this web session?")) {
+        await api("/api/users/" + encodeURIComponent(b.dataset.user) + "/sessions/" + encodeURIComponent(b.dataset.userSessionRevoke), { method: "DELETE" });
+        toast("Session revoked");
+        await loadAccess();
+        await openUserDetail(b.dataset.user);
+      }
+    }));
+    document.querySelectorAll("[data-telegram-unlink]").forEach((b) => b.onclick = () => safe(async () => {
+      if (confirm("Unlink this Telegram identity?")) {
+        await api("/api/users/" + encodeURIComponent(b.dataset.telegramUser) + "/telegram/" + encodeURIComponent(b.dataset.telegramUnlink), { method: "DELETE" });
+        toast("Telegram unlinked");
+        loadAccess();
+      }
+    }));
+    document.querySelectorAll("[data-discord-unlink]").forEach((b) => b.onclick = () => safe(async () => {
+      if (confirm("Unlink this Discord identity?")) {
+        await api("/api/users/" + encodeURIComponent(b.dataset.discordUser) + "/discord/" + encodeURIComponent(b.dataset.discordUnlink), { method: "DELETE" });
+        toast("Discord unlinked");
+        loadAccess();
+      }
+    }));
+    document.querySelectorAll("[data-slack-unlink]").forEach((b) => b.onclick = () => safe(async () => {
+      if (confirm("Unlink this Slack identity?")) {
+        await api("/api/users/" + encodeURIComponent(b.dataset.slackUser) + "/slack/" + encodeURIComponent(b.dataset.slackUnlink), { method: "DELETE" });
+        toast("Slack unlinked");
+        loadAccess();
+      }
+    }));
+    document.querySelectorAll("[data-group-edit]").forEach((b) => b.onclick = () => {
+      const g = (state.userManagement?.groups || []).find((x) => x.id === b.dataset.groupEdit);
+      if (g) openGroupDialogV2(g);
+    });
+    document.querySelectorAll("[data-chat-edit]").forEach((b) => b.onclick = () => {
+      const c = (state.userManagement?.telegramChats || []).find((x) => x.id === b.dataset.chatEdit);
+      if (c) openChatDialog(c);
+    });
+    document.querySelectorAll("[data-chat-toggle]").forEach((b) => b.onclick = () => safe(async () => {
+      const c = (state.userManagement?.telegramChats || []).find((x) => x.id === b.dataset.chatToggle);
+      if (!c) return;
+      await api("/api/telegram-chats/" + encodeURIComponent(c.id), { method: "PATCH", body: JSON.stringify({ enabled: !c.enabled }) });
+      toast("Chat updated");
+      loadAccess();
+    }));
+    document.querySelectorAll("[data-discord-channel-edit]").forEach((b) => b.onclick = () => {
+      const c = (state.userManagement?.discordChannels || []).find((x) => x.id === b.dataset.discordChannelEdit);
+      if (c) openDiscordChannelDialog(c);
+    });
+    document.querySelectorAll("[data-discord-channel-toggle]").forEach((b) => b.onclick = () => safe(async () => {
+      const c = (state.userManagement?.discordChannels || []).find((x) => x.id === b.dataset.discordChannelToggle);
+      if (!c) return;
+      await api("/api/discord-channels/" + encodeURIComponent(c.id), { method: "PATCH", body: JSON.stringify({ enabled: !c.enabled }) });
+      toast("Discord channel updated");
+      loadAccess();
+    }));
+    bindAccessCopyButtons();
+    applyPermissions();
+  }
+  function userDetailTab(label, id, active) {
+    return '<button type="button" data-user-detail-tab="' + attr(id) + '" class="' + (active ? "active" : "") + '">' + esc(label) + "</button>";
+  }
+  function userDetailPanel(id, active, body) {
+    return '<div class="user-detail-panel ' + (active ? "active" : "") + '" data-user-detail-panel="' + attr(id) + '">' + body + "</div>";
+  }
+  async function openUserDetail(userId) {
+    const user = (state.userManagement?.users || []).find((u) => u.id === userId);
+    if (!user) return;
+    state.activeUserDetailId = userId;
+    renderUserDetail(user);
+    document.getElementById("userDetailDialog").showModal();
+    if (can("audit.read")) {
+      const data = await api("/api/audit", { query: { limit: 100 } });
+      state.userDetailAudit[userId] = (data.events || []).filter((e) => userAuditMatches(user, e)).slice(0, 15);
+      if (state.activeUserDetailId === userId) renderUserDetail(user);
+    }
+  }
+  function userAuditMatches(user, e) {
+    const text = [e.actor?.id, e.actor?.label, e.actor?.username, e.actorId, e.actorRole, e.description, e.detail].join(" ").toLowerCase();
+    const ids = [user.id, user.email, user.displayName].concat((user.telegramIdentities || []).map((i) => String(i.telegramUserId)), (user.discordIdentities || []).map((i) => i.discordUserId), (user.slackIdentities || []).map((i) => i.slackUserId)).filter(Boolean).map((x) => String(x).toLowerCase());
+    return ids.some((id) => text.includes(id));
+  }
+  function renderUserDetail(user) {
+    const audit = state.userDetailAudit?.[user.id];
+    const profile = card("Profile", [["Email", user.email], ["User ID", user.id], ["Status", user.active ? "active" : "disabled"], ["Created", fmtDate(user.createdAt)], ["Updated", fmtDate(user.updatedAt)], ["Last login", fmtDate(user.lastLoginAt)], ["Web sessions", (user.webSessions || []).length]]);
+    const groups = (user.groups || []).map((g) => uiItem(g.name, { badge: g.system ? { text: "system", status: "disabled" } : null, rows: [["Description", g.description], ["Permissions", (g.permissions || []).length], ["Agent scope", csv(g.agentIds) || "all"], ["Workspace scope", csv(g.workspaceRoots) || "all"]] })).join("") || uiEmpty("No groups.");
+    const identities = identityDetailHtml(user);
+    const sessions = (user.webSessions || []).map((s) => '<div class="item"><strong>' + esc("Session " + s.id) + "</strong><small>" + esc("Created: " + fmtDate(s.createdAt)) + "</small><small>" + esc("Last seen: " + fmtDate(s.lastSeenAt)) + "</small><small>" + esc("Expires: " + fmtDate(s.expiresAt)) + '</small><div class="row"><button class="danger" data-user="' + attr(user.id) + '" data-user-session-revoke="' + attr(s.id) + '"' + disabledAttr("users.write") + ">Revoke</button></div></div>").join("") || uiEmpty("No active web sessions.");
+    const effective = effectiveAccessHtml(user);
+    const auditHtml = !can("audit.read") ? uiEmpty("Permission required: audit.read") : audit ? audit.map((e) => '<div class="item"><strong>' + esc([fmtDate(e.timestamp), e.status, e.action].join(" | ")) + "</strong><small>" + esc(e.description || e.detail || "") + "</small></div>").join("") || uiEmpty("No user-related audit events found.") : loadingHtml("Loading user audit...");
+    const tabs = userDetailTab("Profile", "profile", true) + userDetailTab("Groups", "groups", false) + userDetailTab("Identities", "identities", false) + userDetailTab("Web sessions", "sessions", false) + userDetailTab("Effective access", "effective", false) + userDetailTab("Audit", "audit", false);
+    document.getElementById("userDetail").innerHTML = "<h2>" + esc(user.displayName) + "</h2><p>" + esc(user.email) + '</p><div class="tabs user-detail-tabs">' + tabs + "</div>" + userDetailPanel("profile", true, profile + '<div class="row"><button data-user-edit="' + attr(user.id) + '"' + disabledAttr("users.write") + '>Edit user</button><button class="secondary" data-user-password="' + attr(user.id) + '"' + disabledAttr("users.write") + '>Set password</button><button class="secondary" data-user-toggle="' + attr(user.id) + '"' + disabledAttr("users.write") + ">" + (user.active ? "Disable" : "Enable") + "</button></div>") + userDetailPanel("groups", false, '<div class="list">' + groups + "</div>") + userDetailPanel("identities", false, identities) + userDetailPanel("sessions", false, '<div class="list">' + sessions + '</div><div class="row"><button class="danger" data-user-revoke="' + attr(user.id) + '"' + disabledAttr("users.write") + ">Revoke all sessions</button></div>") + userDetailPanel("effective", false, effective) + userDetailPanel("audit", false, '<div class="list">' + auditHtml + "</div>");
+    bindUserDetailTabs();
+    bindUserButtonsV2();
+    bindAccessCopyButtons();
+  }
+  function bindUserDetailTabs() {
+    document.querySelectorAll("[data-user-detail-tab]").forEach((b) => b.onclick = () => {
+      document.querySelectorAll("[data-user-detail-tab]").forEach((x) => x.classList.toggle("active", x === b));
+      document.querySelectorAll("[data-user-detail-panel]").forEach((panel) => panel.classList.toggle("active", panel.dataset.userDetailPanel === b.dataset.userDetailTab));
+    });
+  }
+  function identityDetailHtml(user) {
+    const telegram = (user.telegramIdentities || []).map((t) => '<div class="item"><strong>Telegram <span class="adapter-status ' + (t.active ? "enabled" : "disabled") + '">' + (t.active ? "active" : "disabled") + '</span></strong><small class="access-id-row">User ID: ' + accessCopyButton(String(t.telegramUserId), "Telegram user ID copied") + "</small>" + (t.username ? "<small>" + esc("@" + t.username) + "</small>" : "") + '<div class="row"><button class="secondary" data-telegram-user="' + attr(user.id) + '" data-telegram-unlink="' + attr(t.id) + '"' + disabledAttr("users.write") + ">Unlink</button></div></div>").join("");
+    const discord = (user.discordIdentities || []).map((i) => '<div class="item"><strong>Discord <span class="adapter-status ' + (i.active ? "enabled" : "disabled") + '">' + (i.active ? "active" : "disabled") + '</span></strong><small class="access-id-row">User ID: ' + accessCopyButton(i.discordUserId, "Discord user ID copied") + "</small>" + (i.username ? "<small>" + esc("@" + i.username) + "</small>" : "") + (i.globalName ? "<small>" + esc(i.globalName) + "</small>" : "") + '<div class="row"><button class="secondary" data-discord-user="' + attr(user.id) + '" data-discord-unlink="' + attr(i.id) + '"' + disabledAttr("users.write") + ">Unlink</button></div></div>").join("");
+    const slack = (user.slackIdentities || []).map((i) => '<div class="item"><strong>Slack <span class="adapter-status ' + (i.active ? "enabled" : "disabled") + '">' + (i.active ? "active" : "disabled") + '</span></strong><small class="access-id-row">User ID: ' + accessCopyButton(i.slackUserId, "Slack user ID copied") + "</small>" + (i.teamId ? '<small class="access-id-row">Team ID: ' + accessCopyButton(i.teamId, "Slack team ID copied") + "</small>" : "") + (i.username ? "<small>" + esc("@" + i.username) + "</small>" : "") + (i.realName ? "<small>" + esc(i.realName) + "</small>" : "") + '<div class="row"><button class="secondary" data-slack-user="' + attr(user.id) + '" data-slack-unlink="' + attr(i.id) + '"' + disabledAttr("users.write") + ">Unlink</button></div></div>").join("");
+    return '<div class="row identity-actions"><button class="secondary" data-user-code="' + attr(user.id) + '"' + disabledAttr("users.write") + '>Telegram code</button><button class="secondary" data-user-link="' + attr(user.id) + '"' + disabledAttr("users.write") + '>Link Telegram ID</button><button class="secondary" data-user-discord-code="' + attr(user.id) + '"' + disabledAttr("users.write") + '>Discord code</button><button class="secondary" data-user-discord-link="' + attr(user.id) + '"' + disabledAttr("users.write") + '>Link Discord ID</button><button class="secondary" data-user-slack-code="' + attr(user.id) + '"' + disabledAttr("users.write") + '>Slack code</button><button class="secondary" data-user-slack-link="' + attr(user.id) + '"' + disabledAttr("users.write") + '>Link Slack ID</button></div><div class="list">' + (telegram + discord + slack || uiEmpty("No chat identities linked.")) + "</div>";
+  }
+  function effectiveAccessHtml(user) {
+    const perms = effectivePermissions(user);
+    const permissionRows = ACCESS_PERMISSION_GROUPS.map(([name, items]) => [name, items.filter((p) => perms.includes(p)).join(", ") || "-"]);
+    const channelRows = [["Agents", scopedUnion(user, "agentIds").join(", ")], ["Workspaces", scopedUnion(user, "workspaceRoots").join(", ")], ["Telegram chat scope", scopedUnion(user, "telegramChatIds").join(", ")], ["Discord channel scope", scopedUnion(user, "discordChannelIds").join(", ")], ["Slack channel scope", scopedUnion(user, "slackChannelIds").join(", ")]];
+    return '<div class="access-effective-grid">' + card("Permissions", permissionRows) + card("Scopes", channelRows) + "</div>";
+  }
+  async function showLinkCodeDialog(channel, userId) {
+    const path = "/api/users/" + encodeURIComponent(userId) + "/" + channel;
+    const data = await api(path, { method: "POST", body: JSON.stringify({ createCode: true }) });
+    const linkCode = data.linkCode || {};
+    const label = channel[0].toUpperCase() + channel.slice(1);
+    showAccessInfoDialog(label + " link code", "<p>Send this code with the " + esc(label) + ' bot/app link command for this user. The code expires automatically.</p><div class="peer-invite-details"><small>Link code</small><button type="button" class="copy-id peer-invite-command" data-access-copy="' + attr(linkCode.code || "") + '" data-access-copy-label="' + attr(label + " link code copied") + '">' + esc(linkCode.code || "") + "</button><small>" + esc("Expires: " + fmtDate(linkCode.expiresAt)) + "</small></div>");
+  }
+  function showAccessInfoDialog(title, body) {
+    const dialog = document.getElementById("adminDialog");
+    document.getElementById("adminDialogTitle").textContent = title;
+    document.getElementById("adminDialogBody").innerHTML = body;
+    document.getElementById("adminDialogSubmit").textContent = "Close";
+    document.getElementById("adminDialogCancel").onclick = () => dialog.close();
+    document.getElementById("adminDialogForm").onsubmit = (e) => {
+      e.preventDefault();
+      dialog.close();
+    };
+    bindAccessCopyButtons();
+    dialog.showModal();
+  }
+  function permissionCheckboxes(selected = []) {
+    const selectedSet = new Set(selected);
+    const used = new Set(ACCESS_PERMISSION_GROUPS.flatMap(([, items]) => items));
+    const extra = (state.userManagement?.permissions || []).filter((p) => !used.has(p)).sort();
+    const groups = ACCESS_PERMISSION_GROUPS.concat(extra.length ? [["Other", extra]] : []);
+    return groups.map(([name, items]) => '<fieldset class="permission-section"><legend>' + esc(name) + "</legend>" + (items || []).map((p) => '<label class="checkbox"><input type="checkbox" data-group-permission="' + attr(p) + '" value="' + attr(p) + '" ' + (selectedSet.has(p) ? "checked" : "") + "> " + esc(p) + "</label>").join("") + "</fieldset>").join("");
+  }
+  function checkboxScope(title, items, selected, attrName, emptyText) {
+    const selectedSet = new Set((selected || []).map(String));
+    return '<div class="scope-section full-span"><strong>' + esc(title) + '</strong><small>Leave every box unchecked to allow all.</small><div class="permission-grid">' + ((items || []).map((item) => '<label class="checkbox"><input type="checkbox" ' + attrName + '="' + attr(item.value) + '" value="' + attr(item.value) + '" ' + (selectedSet.has(String(item.value)) ? "checked" : "") + "> " + esc(item.label) + "</label>").join("") || "<small>" + esc(emptyText || "No options available.") + "</small>") + "</div></div>";
+  }
+  function availableAgentScopeItems() {
+    const labels = { codex: "Codex", pi: "Pi", hermes: "Hermes", openclaw: "OpenClaw", "claude-code": "Claude Code" };
+    const ids = Array.from(/* @__PURE__ */ new Set([...state.enabledAgents || [], "codex", "pi", "hermes", "openclaw", "claude-code"]));
+    return ids.map((id) => ({ value: id, label: labels[id] || id }));
+  }
+  function telegramScopeItems() {
+    return (state.userManagement?.telegramChats || []).map((c) => ({ value: String(c.chatId), label: (c.title || c.chatId) + " / " + (c.type || "-") }));
+  }
+  function discordScopeItems() {
+    return (state.userManagement?.discordChannels || []).map((c) => ({ value: c.channelId, label: discordChannelLabel(c) + " / " + (c.guildId || "DM") }));
+  }
+  function slackScopeItems() {
+    return (state.userManagement?.slackChannels || []).map((c) => ({ value: c.channelId, label: slackChannelLabel(c) + " / " + (c.teamId || "team default") }));
+  }
+  function checkedValues(selector) {
+    return Array.from(document.querySelectorAll(selector + ":checked")).map((el) => el.value).filter(Boolean);
+  }
+  function linesToList(text) {
+    return String(text || "").split(/[\n,]/).map((x) => x.trim()).filter(Boolean);
+  }
+  function openGroupDialogV2(g) {
+    const permissions = g?.permissions || ["inspect", "sessions.read"];
+    const body = '<label>Name<input id="dlgGroupName" value="' + attr(g?.name || "") + '" ' + (g?.system ? "disabled" : "") + '></label><label>Description<input id="dlgGroupDescription" value="' + attr(g?.description || "") + '"></label><label class="full-span">Workspace scope<textarea id="dlgWorkspaceRoots" rows="4" placeholder="One workspace root per line. Empty means all.">' + esc((g?.workspaceRoots || []).join("\n")) + "</textarea></label>" + checkboxScope("Agent scope", availableAgentScopeItems(), g?.agentIds || [], "data-scope-agent", "No agents available.") + checkboxScope("Telegram chat scope", telegramScopeItems(), (g?.telegramChatIds || []).map(String), "data-scope-telegram", "No Telegram chats registered.") + checkboxScope("Discord channel scope", discordScopeItems(), g?.discordChannelIds || [], "data-scope-discord", "No Discord channels registered.") + checkboxScope("Slack channel scope", slackScopeItems(), g?.slackChannelIds || [], "data-scope-slack", "No Slack channels registered.") + '<strong class="full-span">Permissions</strong><div class="permission-category-grid full-span">' + permissionCheckboxes(permissions) + "</div>";
+    adminDialog(g ? "Edit group" : "Create group", body, async () => {
+      const payload = { name: val("dlgGroupName"), description: val("dlgGroupDescription"), permissions: checkedValues("[data-group-permission]"), agentIds: checkedValues("[data-scope-agent]"), workspaceRoots: linesToList(val("dlgWorkspaceRoots")), telegramChatIds: checkedValues("[data-scope-telegram]").map(Number).filter(Number.isInteger), discordChannelIds: checkedValues("[data-scope-discord]"), slackChannelIds: checkedValues("[data-scope-slack]") };
+      await api(g ? "/api/groups/" + encodeURIComponent(g.id) : "/api/groups", { method: g ? "PATCH" : "POST", body: JSON.stringify(payload) });
+      toast(g ? "Group updated" : "Group created");
+    });
+  }
+  switchAccessTab = switchAccessTabV2;
+  bindAccessTabs = bindAccessTabsV2;
+  renderUserManagement = renderUserManagementV2;
+  renderDiscordChannels = renderDiscordChannelsV2;
+  renderSlackChannels = renderSlackChannelsV2;
+  bindUserButtons = bindUserButtonsV2;
+  openGroupDialog = openGroupDialogV2;
+  document.getElementById("closeUserDetailBtn").onclick = () => document.getElementById("userDetailDialog").close();
   const SETUP_WIZARDS = {
     telegram: {
       id: "telegram",
@@ -2641,9 +3772,14 @@
     state.settingsWizard = { home: true };
     renderSettingsWizardHome();
   }
+  function setSettingsChromeVisible(visible) {
+    document.getElementById("settingsTabHeader").style.display = visible ? "" : "none";
+    document.getElementById("settingsSubnav").style.display = visible ? "" : "none";
+    document.getElementById("settingsActions").style.display = visible ? "" : "none";
+  }
   function closeSettingsWizard() {
     state.settingsWizard = null;
-    document.getElementById("settingsTabs").style.display = "";
+    setSettingsChromeVisible(true);
     renderSettings();
   }
   function wizardRequiredValuePresent(key) {
@@ -2657,7 +3793,7 @@
     return (wizard.required || []).filter((key) => !wizardRequiredValuePresent(key));
   }
   function renderSettingsWizardHome() {
-    document.getElementById("settingsTabs").style.display = "none";
+    setSettingsChromeVisible(false);
     const cards = Object.values(SETUP_WIZARDS).map((wizard) => {
       const missing = wizardMissingRequired(wizard);
       const docs = wizardLinkList(wizard.docs);
@@ -2695,7 +3831,7 @@
       return;
     }
     const step = wizard.steps[state.settingsWizard.step] || wizard.steps[0];
-    document.getElementById("settingsTabs").style.display = "none";
+    setSettingsChromeVisible(false);
     document.getElementById("settingsForm").innerHTML = '<div class="settings-wizard"><div class="wizard-header"><div><h2>' + esc(wizard.label) + " setup wizard</h2><p>" + esc(wizard.description) + '</p></div><button type="button" class="secondary" id="wizardHomeBtn">Wizard home</button></div>' + renderWizardProgress(wizard) + '<div class="wizard-step"><h3>' + esc(step.title) + "</h3><p>" + esc(step.body) + "</p>" + wizardLinkList(step.links) + '<div id="wizardRestartBanner"></div><div class="settings-grid">' + step.settings.map(renderWizardSetting).join("") + '</div><div id="wizardErrors" class="wizard-errors"></div><div id="wizardTestResult" class="wizard-test-result"></div><div class="wizard-actions"><button type="button" id="wizardPrevBtn" class="secondary">Back</button><button type="button" id="wizardNextBtn">' + esc(state.settingsWizard.step === wizard.steps.length - 1 ? "Review" : "Next") + '</button><button type="button" id="wizardTestBtn" class="secondary">Test setup</button><button type="button" id="wizardSaveBtn">Save wizard settings</button><button type="button" id="wizardSaveRestartBtn" class="secondary"' + disabledAttr("system.restart") + '>Save and restart</button></div><div class="setting-help">After transport is configured, link users and register allowed chats or channels in the Users page.</div></div></div>';
     bindWizardUx();
     renderWizardValidation();