@nordbyte/nordrelay 0.8.2 → 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"] },
@@ -35,6 +36,7 @@
     { 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"] },
@@ -166,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" || 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) || 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);
@@ -250,6 +252,8 @@
   }
   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");
     const text = String(msg ?? "");
@@ -349,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);
@@ -371,7 +376,7 @@
       ["#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,#discoverPeersBtn,#cancelPeerDiscoveryBtn,[data-peer-probe]", "peers.connect"],
-      ["#exportPeerIdentityBtn,#restorePeerIdentityBtn,[data-peer-repin]", "peers.write"],
+      ["#exportPeerIdentityBtn,#restorePeerIdentityBtn,[data-peer-repin],[data-peer-rotate]", "peers.write"],
       ["#lockSessionBtn,#unlockSessionBtn", "sessions.write"],
       ["[data-switch]", "sessions.write"],
       ["[data-queue],[data-q]", "queue.write"],
@@ -385,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 : "");
@@ -427,9 +485,11 @@
   }
   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)));
   }
@@ -446,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();
@@ -453,9 +514,15 @@
     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 () => {
@@ -517,6 +584,49 @@
     };
   }
   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;
@@ -1542,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");
@@ -1587,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();
@@ -1601,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 () => {
@@ -1717,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");
@@ -1745,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) {
@@ -1773,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");
@@ -1850,13 +1967,15 @@
   }
   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;
@@ -1872,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));
@@ -1883,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" });
@@ -1895,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>' : "";
@@ -1919,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) {
@@ -2415,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;
@@ -2425,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) => {
@@ -2433,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");
@@ -2454,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;
@@ -2728,6 +2922,22 @@
       }
     });
   });
+  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");
@@ -2914,11 +3124,13 @@
   }
   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(", ");
     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>" + 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>" : "") + "<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") + '>Re-pin TLS</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>";
+    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(", ");
@@ -3008,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",
@@ -3107,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) {
@@ -3123,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);
@@ -3161,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();