@nordbyte/nordrelay 0.4.0 → 0.5.0

package/dist/webui-assets/dashboard.js

@@ -0,0 +1,1611 @@
+(() => {
+  const state = { snapshot: null, controls: null, newSessionControls: null, enabledAgents: [], auth: null, permissions: [], settings: [], currentPage: "overview", settingsGroup: null, logsPlain: "", logTimer: null, toastTimer: null, cliStatusActive: false, selectedArtifactTurns: /* @__PURE__ */ new Set(), mediaRecorder: null, recordedChunks: [], events: null, reconnectTimer: null, notifications: false, toolTooltipTimer: null, toolTooltipTarget: null, agentUpdateJobs: [], sessionsRequestId: 0 };
+  async function api(path, options = {}) {
+    const headers = { ...options.body ? { "content-type": "application/json" } : {}, ...options.headers || {} };
+    const res = await fetch(path, { ...options, headers });
+    if (res.status === 401) {
+      location.reload();
+      return;
+    }
+    const text = await res.text();
+    const data = text ? JSON.parse(text) : {};
+    if (!res.ok) throw new Error(data.error || res.statusText);
+    return data;
+  }
+  function toast(msg, options = {}) {
+    const el = document.getElementById("toast");
+    el.textContent = msg;
+    el.style.display = "block";
+    if (state.toastTimer) clearTimeout(state.toastTimer);
+    state.toastTimer = null;
+    if (!options.sticky) {
+      state.toastTimer = setTimeout(() => {
+        el.style.display = "none";
+        state.toastTimer = null;
+      }, options.duration || 3500);
+    }
+  }
+  function esc(s) {
+    return String(s ?? "").replace(/[&<>]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" })[c]);
+  }
+  function attr(s) {
+    return esc(s).replace(/"/g, "&quot;");
+  }
+  function cssEscape(s) {
+    return window.CSS && CSS.escape ? CSS.escape(s) : String(s).replace(/[^a-zA-Z0-9_-]/g, "\\\\$&");
+  }
+  function short(s, max = 250) {
+    const text = String(s ?? "");
+    return text.length > max ? text.slice(0, max - 1) + "..." : text;
+  }
+  async function copyText(text, label = "Copied") {
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      const area = document.createElement("textarea");
+      area.value = text;
+      area.style.position = "fixed";
+      area.style.opacity = "0";
+      document.body.appendChild(area);
+      area.select();
+      document.execCommand("copy");
+      area.remove();
+    }
+    toast(label);
+  }
+  function fmtDate(s) {
+    return s ? new Date(s).toLocaleString() : "-";
+  }
+  function fmtDuration(ms) {
+    if (!ms && ms !== 0) return "-";
+    const sec = Math.round(ms / 1e3);
+    if (sec < 60) return sec + "s";
+    return Math.floor(sec / 60) + "m " + sec % 60 + "s";
+  }
+  function fmtBytes(n) {
+    if (n < 1024) return n + " B";
+    if (n < 1048576) return (n / 1024).toFixed(1).replace(/\\.0$/, "") + " KB";
+    return (n / 1048576).toFixed(1).replace(/\\.0$/, "") + " MB";
+  }
+  function compactNum(n) {
+    if (!n) return "";
+    if (n >= 1e9) return Math.round(n / 1e8) / 10 + "B";
+    if (n >= 1e6) return Math.round(n / 1e5) / 10 + "M";
+    if (n >= 1e3) return Math.round(n / 100) / 10 + "K";
+    return String(n);
+  }
+  function loadingHtml(label) {
+    return '<div class="loading-state"><span class="spinner"></span><span>' + esc(label || "Loading...") + "</span></div>";
+  }
+  function setLoading(id, label) {
+    const el = document.getElementById(id);
+    if (el) el.innerHTML = loadingHtml(label);
+  }
+  function can(permission) {
+    return !permission || (state.permissions || []).includes(permission);
+  }
+  function disabledAttr(permission) {
+    return can(permission) ? "" : ' disabled title="Permission required: ' + attr(permission) + '"';
+  }
+  function applyPermissions() {
+    document.querySelectorAll("[data-permission]").forEach((el) => {
+      const allowed = can(el.dataset.permission);
+      el.hidden = !allowed;
+      el.disabled = !allowed;
+    });
+    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);
+      if (first) page(first.dataset.page);
+    }
+    const disableMap = [
+      ["#promptForm > button,#promptInput", "prompt.send"],
+      ["#fileInput,#recordBtn,#clearFilesBtn", "files.write"],
+      ["#newSessionBtn,#attachBtn,#createSessionBtn", "sessions.write"],
+      ["#retryBtn", "prompt.send"],
+      ["#syncBtn,#handbackBtn", "sessions.write"],
+      ["#abortBtn", "prompt.abort"],
+      ["#clearChatBtn", "sessions.write"],
+      ["#saveSettingsBtn", "settings.write"],
+      ["#restartBtn", "system.restart"],
+      ["#updateBtn", "updates.run"],
+      ["#clearLogsBtn", "logs.clear"],
+      ["#createUserBtn,#createGroupBtn,#createChatBtn", "users.write"],
+      ["#lockSessionBtn,#unlockSessionBtn", "sessions.write"],
+      ["[data-switch]", "sessions.write"],
+      ["[data-queue],[data-q]", "queue.write"],
+      ["[data-del-art],#deleteSelectedArtifactsBtn", "files.write"],
+      ["[data-auth-login],[data-auth-logout]", "auth.manage"],
+      ["[data-update-agent],[data-update-send],[data-update-cancel],[data-update-delete-log]", "updates.run"],
+      ["[data-user-edit],[data-user-toggle],[data-user-code],[data-user-link],[data-user-password],[data-user-revoke],[data-telegram-unlink],[data-group-edit],[data-chat-edit],[data-chat-toggle]", "users.write"]
+    ];
+    disableMap.forEach(([selector, permission]) => document.querySelectorAll(selector).forEach((el) => {
+      el.disabled = !can(permission);
+      if (!can(permission)) el.title = "Permission required: " + permission;
+    }));
+  }
+  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 : "");
+  }
+  function fmtAge(ms) {
+    const sec = Math.max(0, Math.floor(ms / 1e3));
+    if (sec < 60) return sec + "s ago";
+    const min = Math.floor(sec / 60);
+    if (min < 60) return min + "m ago";
+    return Math.floor(min / 60) + "h ago";
+  }
+  function isCliRunningStatus(msg) {
+    return / CLI running\\b/.test(String(msg || ""));
+  }
+  function isCliDoneStatus(msg) {
+    return / CLI task\\b/.test(String(msg || ""));
+  }
+  function applyTheme(theme) {
+    document.documentElement.dataset.theme = theme;
+    localStorage.setItem("nordrelayTheme", theme);
+    document.getElementById("themeBtn").textContent = theme === "dark" ? "Light" : "Dark";
+  }
+  function toggleTheme() {
+    applyTheme(document.documentElement.dataset.theme === "dark" ? "light" : "dark");
+  }
+  function page(name) {
+    state.currentPage = name;
+    document.querySelectorAll("nav button").forEach((b) => b.classList.toggle("active", b.dataset.page === name));
+    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("sidebar").classList.remove("open");
+    void reloadCurrentPage().catch((err) => toast(err.message || String(err)));
+  }
+  async function reloadCurrentPage(options = {}) {
+    const name = state.currentPage;
+    if (name === "chat") {
+      await loadChatHistory();
+      scrollChatToBottom();
+    }
+    if (name === "sessions") await loadSessions(true, options.agentId);
+    if (name === "settings") await loadSettings();
+    if (name === "logs") await loadLogs();
+    if (name === "diagnostics") await loadDiagnostics();
+    if (name === "artifacts") await loadArtifacts();
+    if (name === "activity") await loadActivity();
+    if (name === "tasks") await loadTasks();
+    if (name === "adapters") await loadAdapterHealth();
+    if (name === "access") await loadAccess();
+    if (name === "version") await loadVersion();
+  }
+  document.querySelectorAll("nav button").forEach((b) => b.onclick = () => page(b.dataset.page));
+  document.getElementById("menuBtn").onclick = () => document.getElementById("sidebar").classList.toggle("open");
+  document.getElementById("refreshBtn").onclick = () => loadBootstrap();
+  document.getElementById("themeBtn").onclick = toggleTheme;
+  document.getElementById("logoutBtn").onclick = () => safe(async () => {
+    await api("/api/dashboard/logout", { method: "POST" });
+    location.href = "/";
+  });
+  applyTheme(localStorage.getItem("nordrelayTheme") || "light");
+  function createPaginator(containerId, onChange, pageSize = 50) {
+    const container = document.getElementById(containerId);
+    return {
+      page: 1,
+      pageSize,
+      reset() {
+        this.page = 1;
+      },
+      render(meta = {}) {
+        const hasPrevious = Boolean(meta.hasPrevious);
+        const hasNext = Boolean(meta.hasNext);
+        container.innerHTML = "<span>Page " + this.page + " / " + this.pageSize + ' per page</span><div class="pager-actions"><button data-page-action="prev" ' + (!hasPrevious ? "disabled" : "") + '>Previous</button><button data-page-action="next" ' + (!hasNext ? "disabled" : "") + ">Next</button></div>";
+        const prev = container.querySelector('[data-page-action="prev"]');
+        const next = container.querySelector('[data-page-action="next"]');
+        prev.onclick = () => {
+          if (hasPrevious) {
+            this.page -= 1;
+            onChange();
+          }
+        };
+        next.onclick = () => {
+          if (hasNext) {
+            this.page += 1;
+            onChange();
+          }
+        };
+      }
+    };
+  }
+  const sessionsPager = createPaginator("sessionsPager", () => loadSessions(false), 50);
+  async function loadBootstrap() {
+    const data = await api("/api/bootstrap");
+    state.auth = data.auth || null;
+    state.permissions = data.auth?.permissions || [];
+    state.snapshot = data.status.snapshot;
+    state.controls = data.controls;
+    state.enabledAgents = data.enabledAgents || [];
+    applyPermissions();
+    renderSnapshot(state.snapshot);
+    renderSessionControls();
+    populateNewSessionForm(data.enabledAgents);
+    renderAdapters(data.channels, data.agentAdapters);
+    document.getElementById("footerVersion").textContent = "NordRelay " + (data.status.health?.version || "");
+    document.getElementById("footerHealth").textContent = "Health: " + (data.status.health?.state?.status || "unknown");
+    document.getElementById("footerUser").textContent = "User: " + (data.auth?.user?.email || "-");
+    const agentSelect = document.getElementById("agentSelect");
+    agentSelect.innerHTML = data.enabledAgents.map((a) => '<option value="' + a + '">' + a + "</option>").join("");
+    agentSelect.value = state.snapshot.session.agentId;
+    agentSelect.onchange = () => safe(async () => {
+      const selected = agentSelect.value;
+      const r = await api("/api/agent", { method: "POST", body: JSON.stringify({ agentId: selected }) });
+      if (state.snapshot && r.session) {
+        state.snapshot.session = r.session;
+        renderSnapshot(state.snapshot);
+      }
+      toast("Agent switched");
+      await loadBootstrap();
+      await reloadCurrentPage({ agentId: selected });
+    });
+    applyPermissions();
+  }
+  function renderSnapshot(s) {
+    document.getElementById("sessionLine").textContent = (s.session.agentLabel || "Agent") + " / " + (s.session.model || "default") + " / " + (s.session.threadId || "not started");
+    document.getElementById("sessionText").textContent = s.sessionText || "";
+    document.getElementById("metrics").innerHTML = [
+      ["Status", s.processing ? "working" : "idle"],
+      ["Agent", s.session.agentLabel],
+      ["Queue", s.queue.length],
+      ["Workspace", s.session.workspace],
+      ["Thread", s.session.threadId || "not started"],
+      ["Reasoning", s.session.reasoningEffort || "default"],
+      ["Fast", s.session.capabilities && s.session.capabilities.fastMode ? s.session.fastMode ? "on" : "off" : "n/a"]
+    ].map(([k, v]) => '<div class="metric"><div class="label">' + esc(k) + '</div><div class="value">' + esc(v) + "</div></div>").join("");
+    renderQueue(s.queue, s.queuePaused);
+  }
+  function renderSessionControls() {
+    const c = state.controls || {};
+    const s = state.snapshot?.session || {};
+    const caps = c.capabilities || {};
+    const modelOptions = ['<option value="">Default</option>'].concat((c.models || []).map((m) => '<option value="' + attr(m.slug) + '" ' + (m.slug === s.model ? "selected" : "") + ">" + esc(modelLabel(m)) + "</option>")).join("");
+    const reasoningOptions = (c.reasoningOptions || []).map((v) => '<option value="' + attr(v) + '" ' + (v === s.reasoningEffort ? "selected" : "") + ">" + esc(v) + "</option>").join("");
+    const launchOptions = (c.launchProfiles || []).map((p) => '<option value="' + attr(p.id) + '" ' + (p.id === (s.nextLaunchProfileId || s.launchProfileId) ? "selected" : "") + ">" + esc(p.label + " - " + p.behavior + (p.unsafe ? " - unsafe" : "")) + "</option>").join("");
+    document.getElementById("sessionControls").innerHTML = [
+      caps.modelSelection ? '<label>Model<select id="controlModel"' + disabledAttr("settings.write") + ">" + modelOptions + "</select></label>" : "",
+      caps.reasoningSelection ? "<label>" + esc(c.reasoningLabel || "Reasoning") + '<select id="controlReasoning"' + disabledAttr("settings.write") + ">" + reasoningOptions + "</select></label>" : "",
+      caps.launchProfiles ? '<label>Launch<select id="controlLaunch"' + disabledAttr("settings.write") + ">" + launchOptions + "</select></label>" : "",
+      caps.fastMode ? '<label class="checkbox"><input id="controlFast" type="checkbox" ' + (s.fastMode ? "checked" : "") + disabledAttr("settings.write") + "> Fast mode</label>" : ""
+    ].join("");
+    const model = document.getElementById("controlModel");
+    if (model) model.onchange = () => safe(async () => {
+      if (model.value) {
+        await api("/api/session/model", { method: "POST", body: JSON.stringify({ model: model.value }) });
+        toast("Model updated");
+        loadBootstrap();
+      }
+    });
+    const reasoning = document.getElementById("controlReasoning");
+    if (reasoning) reasoning.onchange = () => safe(async () => {
+      await api("/api/session/reasoning", { method: "POST", body: JSON.stringify({ reasoning: reasoning.value }) });
+      toast((c.reasoningLabel || "Reasoning") + " updated");
+      loadBootstrap();
+    });
+    const launch = document.getElementById("controlLaunch");
+    if (launch) launch.onchange = () => safe(async () => {
+      await api("/api/session/launch", { method: "POST", body: JSON.stringify({ profileId: launch.value }) });
+      toast("Launch profile updated");
+      loadBootstrap();
+    });
+    const fast = document.getElementById("controlFast");
+    if (fast) fast.onchange = () => safe(async () => {
+      await api("/api/session/fast", { method: "POST", body: JSON.stringify({ enabled: fast.checked }) });
+      toast("Fast mode updated");
+      loadBootstrap();
+    });
+  }
+  function renderAdapters(channels, agents) {
+    const channelCards = (channels || []).map((c) => adapterCard(c.label, c.status, "", c.capabilities.join(", ")));
+    const agentCards = (agents || []).map((a) => {
+      const available = a.status === "available";
+      const status = available ? state.enabledAgents.includes(a.id) ? "enabled" : "disabled" : a.status || "planned";
+      return adapterCard(a.label, status, "", a.notes || "");
+    });
+    document.getElementById("agentAdapters").innerHTML = '<div class="list">' + (agentCards.join("") || '<div class="item">No agent adapters.</div>') + "</div>";
+    document.getElementById("chatAdapters").innerHTML = '<div class="list">' + (channelCards.join("") || '<div class="item">No chat adapters.</div>') + "</div>";
+  }
+  function adapterCard(label, status, detail, tooltip = "") {
+    return '<div class="item"><strong title="' + attr(tooltip) + '">' + esc(label) + ' <span class="adapter-status ' + esc(status) + '">' + esc(status) + "</span></strong>" + (detail ? "<small>" + esc(detail) + "</small>" : "") + "</div>";
+  }
+  const agentFeatureDefs = [
+    ["modelSelection", "Model", "Model selection"],
+    ["reasoningSelection", "Reasoning", "Reasoning/thinking level selection"],
+    ["launchProfiles", "Launch", "Launch profile selection"],
+    ["fastMode", "Fast", "Fast mode"],
+    ["workspaces", "Workspaces", "Workspace listing and switching"],
+    ["attachments", "Files/images", "File, photo, and voice attachments"],
+    ["externalActivity", "External busy", "Detect native CLI activity"],
+    ["cliMirror", "CLI mirror", "Mirror native CLI turns"],
+    ["activityLog", "Activity", "Session activity timeline"],
+    ["usageStats", "Usage", "Token and context usage"],
+    ["subscriptionLimits", "Limits", "Subscription/quota limits"],
+    ["auth", "Auth", "Authentication status"],
+    ["login", "Login", "Interactive login"],
+    ["logout", "Logout", "Interactive logout"],
+    ["handback", "Handback", "Return session to native CLI"]
+  ];
+  function featureMatrix(caps) {
+    const c = caps || {};
+    return '<div class="feature-matrix">' + agentFeatureDefs.map(([key, label, title]) => '<span class="feature-chip ' + (c[key] ? "supported" : "unsupported") + '" title="' + attr(title) + '"><span>' + esc(label) + "</span><b>" + (c[key] ? "\u2713" : "-") + "</b></span>").join("") + "</div>";
+  }
+  function versionStatusLabel(status) {
+    if (status === "current") return "Latest";
+    if (status === "outdated") return "Outdated";
+    if (status === "not-installed") return "Not installed";
+    return "Unknown";
+  }
+  function versionStatusClass(status) {
+    if (status === "current") return "available";
+    if (status === "outdated") return "planned";
+    return "disabled";
+  }
+  function jobStatusClass(status) {
+    if (status === "completed") return "available";
+    if (status === "running") return "planned";
+    return "disabled";
+  }
+  function scrollChatToBottom() {
+    const box = document.getElementById("messages");
+    if (!box) return;
+    requestAnimationFrame(() => {
+      box.scrollTop = box.scrollHeight;
+      requestAnimationFrame(() => {
+        box.scrollTop = box.scrollHeight;
+      });
+    });
+  }
+  function appendMessage(cls, text) {
+    const box = document.getElementById("messages");
+    const div = document.createElement("div");
+    div.className = "message " + cls;
+    div.textContent = text;
+    box.appendChild(div);
+    scrollChatToBottom();
+    return div;
+  }
+  function appendQueuedMessage(id) {
+    const div = appendMessage("system", "Queued prompt " + id);
+    const btn = document.createElement("button");
+    btn.textContent = "Cancel queued message";
+    btn.className = "danger";
+    btn.onclick = () => safe(async () => {
+      const r = await api("/api/queue", { method: "POST", body: JSON.stringify({ action: "cancel", id }) });
+      renderQueue(r.queue, r.paused);
+      div.textContent = "Cancelled queued prompt " + id;
+    });
+    div.appendChild(document.createElement("br"));
+    div.appendChild(btn);
+  }
+  function renderChatMessages(messages) {
+    state.chatMessages = messages || [];
+    const box = document.getElementById("messages");
+    box.innerHTML = (messages || []).map((m) => '<div class="message ' + esc(m.role) + '"><small>' + esc((m.source || "web") + " / " + fmtDate(m.timestamp)) + "</small>\\n" + esc(m.text) + "</div>").join("");
+    scrollChatToBottom();
+  }
+  async function loadChatHistory() {
+    const data = await api("/api/chat/history");
+    renderChatMessages(data.messages || []);
+  }
+  let currentAgentMessage = null;
+  function connectEvents() {
+    if (state.events) state.events.close();
+    const events = new EventSource("/api/events");
+    state.events = events;
+    setConnection("Connecting", "warn");
+    events.onopen = () => {
+      if (state.reconnectTimer) {
+        clearTimeout(state.reconnectTimer);
+        state.reconnectTimer = null;
+      }
+      setConnection("Live", "ok");
+    };
+    events.addEventListener("snapshot", (e) => {
+      const d = JSON.parse(e.data).data;
+      state.snapshot = d;
+      renderSnapshot(d);
+      renderSessionControls();
+    });
+    events.addEventListener("chat_history", (e) => renderChatMessages(JSON.parse(e.data).messages || []));
+    events.addEventListener("activity_update", (e) => renderActivity(JSON.parse(e.data).events || []));
+    events.addEventListener("session_update", (e) => {
+      loadBootstrap();
+      loadChatHistory();
+    });
+    events.addEventListener("agent_update", (e) => {
+      const d = JSON.parse(e.data);
+      upsertAgentUpdateJob(d.job);
+      if (state.currentPage === "version") {
+        renderAgentUpdateJobs();
+        if (d.job && d.job.status !== "running") setTimeout(loadVersion, 800);
+      }
+    });
+    events.addEventListener("queue_update", (e) => {
+      const d = JSON.parse(e.data);
+      renderQueue(d.queue, d.paused);
+    });
+    events.addEventListener("turn_start", (e) => {
+      const d = JSON.parse(e.data);
+      appendMessage("user", d.prompt);
+      currentAgentMessage = appendMessage("agent", "");
+      if (state.currentPage === "tasks") loadTasks();
+    });
+    events.addEventListener("text_delta", (e) => {
+      const d = JSON.parse(e.data);
+      if (!currentAgentMessage) currentAgentMessage = appendMessage("agent", "");
+      currentAgentMessage.textContent += d.delta;
+      scrollChatToBottom();
+      if (state.currentPage === "tasks") loadTasks();
+    });
+    events.addEventListener("tool_start", (e) => {
+      const d = JSON.parse(e.data);
+      tool("tool", "Started " + d.toolName);
+      if (state.currentPage === "tasks") loadTasks();
+    });
+    events.addEventListener("tool_update", (e) => {
+      const d = JSON.parse(e.data);
+      if (d.partialResult) tool("tool", d.partialResult.slice(-600));
+    });
+    events.addEventListener("tool_end", (e) => {
+      const d = JSON.parse(e.data);
+      tool(d.isError ? "danger" : "tool", "Finished " + d.toolCallId + (d.isError ? " with error" : ""));
+    });
+    events.addEventListener("todo_update", (e) => {
+      const d = JSON.parse(e.data);
+      tool("tool", "Plan:\\n" + d.items.map((i) => (i.completed ? "[x] " : "[ ] ") + i.text).join("\\n"));
+    });
+    events.addEventListener("turn_error", (e) => {
+      const d = JSON.parse(e.data);
+      appendMessage("system", "Error: " + d.error);
+      currentAgentMessage = null;
+    });
+    events.addEventListener("turn_complete", () => {
+      currentAgentMessage = null;
+      notify("NordRelay turn finished", "The active task completed.");
+      loadBootstrap();
+      if (state.currentPage === "tasks") loadTasks();
+    });
+    events.addEventListener("status", (e) => {
+      const d = JSON.parse(e.data);
+      const msg = d.message || "";
+      if (isCliRunningStatus(msg)) {
+        state.cliStatusActive = true;
+        toast(msg, { sticky: true });
+        return;
+      }
+      if (isCliDoneStatus(msg)) state.cliStatusActive = false;
+      toast(msg);
+    });
+    events.onerror = () => {
+      setConnection("Reconnecting", "error");
+      if (!state.reconnectTimer) state.reconnectTimer = setTimeout(() => {
+        state.reconnectTimer = null;
+        connectEvents();
+      }, 5e3);
+    };
+  }
+  function setConnection(text, kind) {
+    const el = document.getElementById("connectionStatus");
+    el.textContent = text;
+    el.className = "badge connection-" + kind;
+  }
+  async function enableNotifications() {
+    if (!("Notification" in window)) {
+      toast("Browser notifications are not supported");
+      return;
+    }
+    const permission = Notification.permission === "granted" ? "granted" : await Notification.requestPermission();
+    state.notifications = permission === "granted";
+    toast(state.notifications ? "Browser notifications enabled" : "Browser notifications denied");
+  }
+  function notify(title, body) {
+    if (state.notifications && "Notification" in window && Notification.permission === "granted") new Notification(title, { body });
+  }
+  function toolAgeText(el) {
+    const created = Number(el.dataset.createdAt || Date.now());
+    return "Updated " + fmtAge(Date.now() - created);
+  }
+  function refreshToolTooltip() {
+    const tip = document.getElementById("toolTooltip");
+    if (tip && state.toolTooltipTarget) tip.textContent = toolAgeText(state.toolTooltipTarget);
+  }
+  function positionToolTooltip(event) {
+    const tip = document.getElementById("toolTooltip");
+    if (!tip || tip.style.display === "none") return;
+    const gap = 12;
+    const rect = tip.getBoundingClientRect();
+    let x = event.clientX + gap;
+    let y = event.clientY + gap;
+    if (x + rect.width > window.innerWidth - 8) x = event.clientX - rect.width - gap;
+    if (y + rect.height > window.innerHeight - 8) y = event.clientY - rect.height - gap;
+    tip.style.left = Math.max(8, x) + "px";
+    tip.style.top = Math.max(8, y) + "px";
+  }
+  function showToolTooltip(target, event) {
+    state.toolTooltipTarget = target;
+    const tip = document.getElementById("toolTooltip");
+    if (!tip) return;
+    refreshToolTooltip();
+    tip.style.display = "block";
+    positionToolTooltip(event);
+    if (state.toolTooltipTimer) clearInterval(state.toolTooltipTimer);
+    state.toolTooltipTimer = setInterval(refreshToolTooltip, 1e3);
+  }
+  function hideToolTooltip() {
+    const tip = document.getElementById("toolTooltip");
+    if (tip) tip.style.display = "none";
+    state.toolTooltipTarget = null;
+    if (state.toolTooltipTimer) clearInterval(state.toolTooltipTimer);
+    state.toolTooltipTimer = null;
+  }
+  function updateToolAgeTitles() {
+    document.querySelectorAll(".tool[data-created-at]").forEach((el) => el.setAttribute("aria-label", toolAgeText(el)));
+  }
+  const toolStreamEl = document.getElementById("toolStream");
+  toolStreamEl.addEventListener("mouseover", (e) => {
+    const target = e.target.closest?.(".tool[data-created-at]");
+    if (target && target !== state.toolTooltipTarget) showToolTooltip(target, e);
+  });
+  toolStreamEl.addEventListener("mousemove", (e) => positionToolTooltip(e));
+  toolStreamEl.addEventListener("mouseout", (e) => {
+    const target = e.target.closest?.(".tool[data-created-at]");
+    if (target && !target.contains(e.relatedTarget)) hideToolTooltip();
+  });
+  toolStreamEl.addEventListener("focusin", (e) => {
+    const target = e.target.closest?.(".tool[data-created-at]");
+    if (target) showToolTooltip(target, { clientX: target.getBoundingClientRect().left, clientY: target.getBoundingClientRect().bottom });
+  });
+  toolStreamEl.addEventListener("focusout", hideToolTooltip);
+  function tool(cls, text) {
+    const div = document.createElement("div");
+    div.className = "tool " + (cls === "danger" ? "danger" : "");
+    div.dataset.createdAt = String(Date.now());
+    div.tabIndex = 0;
+    div.textContent = text;
+    document.getElementById("toolStream").prepend(div);
+    updateToolAgeTitles();
+  }
+  setInterval(updateToolAgeTitles, 3e4);
+  let selectedFiles = [];
+  function renderSelectedFiles() {
+    const summary = document.getElementById("fileSummary");
+    if (selectedFiles.length === 0) {
+      summary.textContent = "No files selected";
+      return;
+    }
+    const names = selectedFiles.slice(0, 3).map((f) => f.name || "file").join(", ");
+    const more = selectedFiles.length > 3 ? " +" + (selectedFiles.length - 3) + " more" : "";
+    const bytes = selectedFiles.reduce((sum, file) => sum + file.size, 0);
+    summary.textContent = names + more + " (" + fmtBytes(bytes) + ")";
+  }
+  function addFiles(files) {
+    selectedFiles = selectedFiles.concat(Array.from(files || []));
+    renderSelectedFiles();
+  }
+  async function filePayload(file) {
+    return { name: file.name || "upload", mimeType: file.type || "application/octet-stream", dataBase64: await fileToBase64(file) };
+  }
+  async function fileToBase64(file) {
+    const buffer = await file.arrayBuffer();
+    const bytes = new Uint8Array(buffer);
+    let binary = "";
+    const chunk = 32768;
+    for (let i = 0; i < bytes.length; i += chunk) {
+      binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+    }
+    return btoa(binary);
+  }
+  document.getElementById("fileInput").onchange = (e) => {
+    if (!can("files.write")) {
+      toast("Permission required: files.write");
+      return;
+    }
+    addFiles(e.target.files);
+  };
+  document.getElementById("clearFilesBtn").onclick = () => {
+    selectedFiles = [];
+    document.getElementById("fileInput").value = "";
+    renderSelectedFiles();
+  };
+  document.addEventListener("paste", (e) => {
+    const files = Array.from(e.clipboardData?.files || []);
+    if (files.length) {
+      if (!can("files.write")) {
+        toast("Permission required: files.write");
+        return;
+      }
+      addFiles(files);
+      toast("Pasted " + files.length + " file(s)");
+    }
+  });
+  document.addEventListener("dragover", (e) => {
+    e.preventDefault();
+    document.body.classList.add("drop-active");
+  });
+  document.addEventListener("dragleave", () => document.body.classList.remove("drop-active"));
+  document.addEventListener("drop", (e) => {
+    e.preventDefault();
+    document.body.classList.remove("drop-active");
+    const files = Array.from(e.dataTransfer?.files || []);
+    if (files.length) {
+      if (!can("files.write")) {
+        toast("Permission required: files.write");
+        return;
+      }
+      addFiles(files);
+      toast("Added " + files.length + " dropped file(s)");
+    }
+  });
+  document.getElementById("promptForm").onsubmit = (e) => safe(async () => {
+    e.preventDefault();
+    if (!can("prompt.send")) {
+      toast("Permission required: prompt.send");
+      return;
+    }
+    if (selectedFiles.length && !can("files.write")) {
+      toast("Permission required: files.write");
+      return;
+    }
+    const input = document.getElementById("promptInput");
+    const text = input.value.trim();
+    if (!text && selectedFiles.length === 0) return;
+    const files = selectedFiles;
+    input.value = "";
+    selectedFiles = [];
+    document.getElementById("fileInput").value = "";
+    renderSelectedFiles();
+    const payloadFiles = files.length ? await Promise.all(files.map(filePayload)) : [];
+    const r = files.length ? await api("/api/prompt/upload", { method: "POST", body: JSON.stringify({ text, files: payloadFiles }) }) : await api("/api/prompt", { method: "POST", body: JSON.stringify({ text }) });
+    if (r.transcribeOnly) appendMessage("system", "Transcribed audio:\\n" + (r.transcript || "(empty)"));
+    else if (r.queued) appendQueuedMessage(r.queueId);
+  }, e);
+  document.getElementById("newSessionBtn").onclick = () => {
+    if (!can("sessions.write")) {
+      toast("Permission required: sessions.write");
+      return;
+    }
+    openNewSessionDialog();
+  };
+  document.getElementById("retryBtn").onclick = () => safe(async () => {
+    if (!can("prompt.send")) {
+      toast("Permission required: prompt.send");
+      return;
+    }
+    const r = await api("/api/retry", { method: "POST" });
+    toast(r.queued ? "Retry queued " + r.queueId : "Retry started");
+  });
+  document.getElementById("editLastBtn").onclick = () => {
+    const last = [...state.chatMessages || []].reverse().find((m) => m.role === "user");
+    if (last) {
+      document.getElementById("promptInput").value = last.text;
+      document.getElementById("promptInput").focus();
+    } else toast("No user prompt found");
+  };
+  document.getElementById("syncBtn").onclick = () => safe(async () => {
+    if (!can("sessions.write")) {
+      toast("Permission required: sessions.write");
+      return;
+    }
+    const r = await api("/api/sync", { method: "POST" });
+    toast(r.changed ? "Synced: " + (r.changedFields || []).join(", ") : "Already in sync");
+    loadBootstrap();
+  });
+  document.getElementById("notifyBtn").onclick = () => enableNotifications();
+  document.getElementById("clearChatBtn").onclick = () => safe(async () => {
+    if (!can("sessions.write")) {
+      toast("Permission required: sessions.write");
+      return;
+    }
+    if (confirm("Clear chat history for the current thread?")) {
+      const r = await api("/api/chat/history", { method: "DELETE" });
+      renderChatMessages(r.messages || []);
+      toast("Removed " + r.removed + " messages");
+    }
+  });
+  document.getElementById("abortBtn").onclick = () => safe(async () => {
+    if (!can("prompt.abort")) {
+      toast("Permission required: prompt.abort");
+      return;
+    }
+    await api("/api/abort", { method: "POST" });
+    toast("Abort sent");
+  });
+  document.getElementById("handbackBtn").onclick = () => safe(async () => {
+    if (!can("sessions.write")) {
+      toast("Permission required: sessions.write");
+      return;
+    }
+    const r = await api("/api/handback", { method: "POST" });
+    appendMessage("system", "Handback command:\\n" + (r.command || "No command available"));
+  });
+  document.getElementById("recordBtn").onclick = () => safe(async () => {
+    if (!can("files.write")) {
+      toast("Permission required: files.write");
+      return;
+    }
+    const btn = document.getElementById("recordBtn");
+    if (state.mediaRecorder && state.mediaRecorder.state === "recording") {
+      state.mediaRecorder.stop();
+      btn.textContent = "Record voice";
+      return;
+    }
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    state.recordedChunks = [];
+    state.mediaRecorder = new MediaRecorder(stream);
+    state.mediaRecorder.ondataavailable = (e) => {
+      if (e.data.size > 0) state.recordedChunks.push(e.data);
+    };
+    state.mediaRecorder.onstop = () => {
+      stream.getTracks().forEach((t) => t.stop());
+      const blob = new Blob(state.recordedChunks, { type: "audio/webm" });
+      addFiles([new File([blob], "voice-note.webm", { type: "audio/webm" })]);
+      toast("Voice note attached");
+    };
+    state.mediaRecorder.start();
+    btn.textContent = "Stop recording";
+  });
+  function renderNewSessionControls(c) {
+    const s = state.snapshot?.session || {};
+    const caps = c.capabilities || {};
+    document.getElementById("workspaceOptions").innerHTML = (c.workspaces || []).map((w) => '<option value="' + attr(w) + '"></option>').join("");
+    document.getElementById("newModel").innerHTML = '<option value="">Default</option>' + (c.models || []).map((m) => '<option value="' + attr(m.slug) + '">' + esc(modelLabel(m)) + "</option>").join("");
+    document.getElementById("newModel").parentElement.style.display = caps.modelSelection ? "grid" : "none";
+    const reasoningWrap = document.getElementById("newReasoningWrap");
+    reasoningWrap.firstChild.nodeValue = c.reasoningLabel || "Reasoning";
+    reasoningWrap.style.display = caps.reasoningSelection ? "grid" : "none";
+    document.getElementById("newReasoning").innerHTML = '<option value="">Default</option>' + (c.reasoningOptions || []).map((v) => '<option value="' + attr(v) + '">' + esc(v) + "</option>").join("");
+    document.getElementById("newLaunch").innerHTML = '<option value="">Default</option>' + (c.launchProfiles || []).map((p) => '<option value="' + attr(p.id) + '">' + esc(p.label + " - " + p.behavior) + "</option>").join("");
+    document.getElementById("newFast").checked = Boolean(s.fastMode && caps.fastMode);
+    document.getElementById("newLaunchWrap").style.display = caps.launchProfiles ? "grid" : "none";
+    document.getElementById("newFastWrap").style.display = caps.fastMode ? "inline-flex" : "none";
+  }
+  function populateNewSessionForm(agents) {
+    const s = state.snapshot?.session || {};
+    const agentSelect = document.getElementById("newAgent");
+    agentSelect.innerHTML = (agents || []).map((a) => '<option value="' + attr(a) + '" ' + (a === s.agentId ? "selected" : "") + ">" + esc(a) + "</option>").join("");
+    agentSelect.value = s.agentId || agentSelect.value;
+    document.getElementById("newWorkspace").value = s.workspace || "";
+    state.newSessionControls = state.controls || {};
+    renderNewSessionControls(state.newSessionControls);
+    agentSelect.onchange = () => safe(async () => {
+      state.newSessionControls = await api("/api/control-options?agent=" + encodeURIComponent(agentSelect.value));
+      renderNewSessionControls(state.newSessionControls);
+    });
+  }
+  function openNewSessionDialog() {
+    populateNewSessionForm(state.enabledAgents);
+    document.getElementById("newSessionDialog").showModal();
+  }
+  document.getElementById("newSessionForm").onsubmit = (e) => safe(async () => {
+    e.preventDefault();
+    if (!can("sessions.write")) {
+      toast("Permission required: sessions.write");
+      return;
+    }
+    const payload = { agentId: val("newAgent"), workspace: val("newWorkspace") || void 0, model: val("newModel") || void 0, reasoningEffort: val("newReasoning") || void 0, launchProfileId: val("newLaunch") || void 0, fastMode: document.getElementById("newFast").checked };
+    await api("/api/sessions/new", { method: "POST", body: JSON.stringify(payload) });
+    document.getElementById("newSessionDialog").close();
+    toast("New session started");
+    await loadBootstrap();
+    await loadChatHistory();
+  }, e);
+  document.getElementById("cancelSessionBtn").onclick = () => document.getElementById("newSessionDialog").close();
+  function val(id) {
+    return document.getElementById(id).value.trim();
+  }
+  function activeAgentId() {
+    return state.snapshot?.session?.agentId || document.getElementById("agentSelect").value || "";
+  }
+  async function loadSessions(reset = true, agentId) {
+    if (reset) sessionsPager.reset();
+    const expectedAgent = agentId || activeAgentId();
+    const requestId = ++state.sessionsRequestId;
+    setLoading("sessionsList", "Loading " + (expectedAgent || "agent") + " sessions...");
+    const q = document.getElementById("sessionSearch").value || "";
+    const agentParam = expectedAgent ? "&agent=" + encodeURIComponent(expectedAgent) : "";
+    const data = await api("/api/sessions?query=" + encodeURIComponent(q) + "&page=" + sessionsPager.page + "&limit=" + sessionsPager.pageSize + agentParam);
+    if (requestId !== state.sessionsRequestId || expectedAgent !== activeAgentId()) return;
+    document.getElementById("sessionsList").innerHTML = data.sessions.map((s) => '<div class="item"><strong title="' + attr(s.title || s.firstUserMessage || s.id) + '">' + esc(short(s.title || s.firstUserMessage || s.id)) + '</strong><small><button type="button" class="copy-id" data-copy-id="' + attr(s.id) + '" title="Copy thread ID">' + esc(short(s.id, 64)) + "</button> / " + esc(short((s.cwd || "") + " / " + fmtDate(s.updatedAt))) + '</small><div class="row"><button data-switch="' + attr(s.id) + '"' + disabledAttr("sessions.write") + '>Switch</button><button class="secondary" data-session-detail="' + attr(s.id) + '">Details</button></div></div>').join("") || '<div class="item">No sessions found.</div>';
+    sessionsPager.render(data.pagination || {});
+    document.querySelectorAll("[data-copy-id]").forEach((b) => b.onclick = () => copyText(b.dataset.copyId || "", "Thread ID copied"));
+    document.querySelectorAll("[data-switch]").forEach((b) => b.onclick = () => safe(async () => {
+      if (!can("sessions.write")) {
+        toast("Permission required: sessions.write");
+        return;
+      }
+      await api("/api/sessions/switch", { method: "POST", body: JSON.stringify({ threadId: b.dataset.switch }) });
+      toast("Session switched");
+      loadBootstrap();
+    }));
+    document.querySelectorAll("[data-session-detail]").forEach((b) => b.onclick = () => safe(() => loadSessionDetail(b.dataset.sessionDetail)));
+    applyPermissions();
+  }
+  function usageRows(rows) {
+    return (rows || []).map((row) => {
+      if (Array.isArray(row)) return [row[0], row[1]];
+      const text = String(row);
+      const index = text.indexOf(":");
+      return index > 0 ? [text.slice(0, index), text.slice(index + 1).trim()] : [text, ""];
+    });
+  }
+  function detailSection(title, count, body) {
+    return '<details class="session-detail-section"><summary>' + esc(title + " (" + count + ")") + '</summary><div class="list">' + (body || '<div class="item">No entries.</div>') + "</div></details>";
+  }
+  async function loadSessionDetail(threadId) {
+    const d = await api("/api/sessions/detail?threadId=" + encodeURIComponent(threadId));
+    const r = d.record || {};
+    const messages = d.messages || [];
+    const activity = d.activity || [];
+    const metadataRows = [["Thread", threadId], ["Agent", r.agentId], ["Title", r.title], ["Workspace", r.cwd], ["Model", r.model], ["Reasoning", r.reasoningEffort], ["Updated", fmtDate(r.updatedAt)], ["Path", r.sessionPath]].concat(usageRows(d.usageRows));
+    const messageItems = messages.slice(-20).map((m) => '<div class="item"><strong>' + esc(m.role + " / " + fmtDate(m.timestamp)) + "</strong><small>" + esc(short(m.text, 500)) + "</small></div>").join("");
+    const activityItems = activity.map((e) => '<div class="item"><strong>' + esc(e.status + " / " + e.type + " / " + fmtDate(e.timestamp)) + "</strong><small>" + esc(short(e.prompt || e.detail || "", 300)) + "</small></div>").join("");
+    document.getElementById("sessionDetail").innerHTML = "<h2>Session detail</h2>" + card("Metadata", metadataRows) + detailSection("Recent messages", messages.length, messageItems) + detailSection("Activity", activity.length, activityItems);
+    document.getElementById("sessionDetailDialog").showModal();
+  }
+  document.getElementById("closeSessionDetailBtn").onclick = () => document.getElementById("sessionDetailDialog").close();
+  document.getElementById("sessionSearchBtn").onclick = () => loadSessions(true);
+  document.getElementById("sessionSearch").addEventListener("keydown", (e) => {
+    if (e.key === "Enter") loadSessions(true);
+  });
+  document.getElementById("attachBtn").onclick = async () => {
+    if (!can("sessions.write")) {
+      toast("Permission required: sessions.write");
+      return;
+    }
+    const threadId = document.getElementById("attachInput").value.trim();
+    if (threadId) {
+      await api("/api/sessions/attach", { method: "POST", body: JSON.stringify({ threadId }) });
+      toast("Session attached");
+      loadBootstrap();
+    }
+  };
+  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.querySelectorAll("[data-q]").forEach((b) => b.onclick = () => safe(async () => {
+      if (!can("queue.write")) {
+        toast("Permission required: queue.write");
+        return;
+      }
+      const r = await api("/api/queue", { method: "POST", body: JSON.stringify({ action: b.dataset.q, id: b.dataset.id }) });
+      renderQueue(r.queue, r.paused);
+    }));
+    let dragged = null;
+    document.querySelectorAll(".queue-item").forEach((item) => {
+      item.ondragstart = () => {
+        if (!can("queue.write")) return;
+        dragged = item.dataset.queueId;
+        item.classList.add("dragging");
+      };
+      item.ondragend = () => item.classList.remove("dragging");
+      item.ondragover = (e) => {
+        if (can("queue.write")) e.preventDefault();
+      };
+      item.ondrop = () => safe(async () => {
+        if (!can("queue.write")) {
+          toast("Permission required: queue.write");
+          return;
+        }
+        if (dragged && dragged !== item.dataset.queueId) {
+          const ids = Array.from(document.querySelectorAll(".queue-item")).map((el) => el.dataset.queueId);
+          const targetIndex = Math.max(0, ids.indexOf(item.dataset.queueId));
+          await api("/api/queue", { method: "POST", body: JSON.stringify({ action: "top", id: dragged }) });
+          for (let i = 0; i < targetIndex; i++) await api("/api/queue", { method: "POST", body: JSON.stringify({ action: "down", id: dragged }) });
+          const r = await api("/api/queue");
+          renderQueue(r.queue, r.paused);
+        }
+      });
+    });
+    applyPermissions();
+  }
+  document.querySelectorAll("[data-queue]").forEach((b) => b.onclick = () => safe(async () => {
+    if (!can("queue.write")) {
+      toast("Permission required: queue.write");
+      return;
+    }
+    const r = await api("/api/queue", { method: "POST", body: JSON.stringify({ action: b.dataset.queue }) });
+    renderQueue(r.queue, r.paused);
+  }));
+  async function loadTasks() {
+    setLoading("tasksList", "Loading tasks...");
+    const d = await api("/api/tasks");
+    renderTasks(d);
+  }
+  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>";
+  }
+  function renderTasks(d) {
+    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">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.querySelectorAll("#tasksList [data-q]").forEach((b) => b.onclick = () => safe(async () => {
+      if (!can("queue.write")) {
+        toast("Permission required: queue.write");
+        return;
+      }
+      const r = await api("/api/queue", { method: "POST", body: JSON.stringify({ action: b.dataset.q, id: b.dataset.id }) });
+      renderQueue(r.queue, r.paused);
+      loadTasks();
+    }));
+    applyPermissions();
+  }
+  document.getElementById("reloadTasksBtn").onclick = () => loadTasks();
+  async function loadArtifacts() {
+    setLoading("artifactList", "Loading artifacts...");
+    document.getElementById("artifactPreview").innerHTML = "";
+    const data = await api("/api/artifacts");
+    state.artifactReports = data.reports || [];
+    renderArtifacts();
+  }
+  function artifactMatches(a, kind, query) {
+    const name = (a.name || a.relativePath || "").toLowerCase();
+    if (query && !name.includes(query)) return false;
+    if (kind === "images") return /\\.(png|jpe?g|gif|webp|svg)$/i.test(name);
+    if (kind === "docs") return !/\\.(png|jpe?g|gif|webp|svg)$/i.test(name);
+    return true;
+  }
+  function renderArtifacts() {
+    const query = (document.getElementById("artifactSearch").value || "").toLowerCase();
+    const kind = document.getElementById("artifactKind").value;
+    const reports = state.artifactReports || [];
+    document.getElementById("artifactList").innerHTML = reports.map((r) => {
+      const files = (r.artifacts || []).filter((a) => artifactMatches(a, kind, query));
+      if (files.length === 0) return "";
+      const gallery = files.map((a) => {
+        const href = "/api/artifacts/file?turnId=" + encodeURIComponent(r.turnId) + "&path=" + encodeURIComponent(a.relativePath);
+        const img = /\\.(png|jpe?g|gif|webp|svg)$/i.test(a.name) ? '<img src="' + href + '">' : "<pre>" + esc(a.name.split(".").pop() || "file") + "</pre>";
+        return '<div class="artifact-card"><label><input type="checkbox" data-artifact-select="' + attr(r.turnId) + '" ' + (state.selectedArtifactTurns.has(r.turnId) ? "checked" : "") + "> " + esc(short(a.name, 32)) + "</label>" + img + "<small>" + esc(fmtBytes(a.sizeBytes)) + '</small><div class="row"><a href="' + href + '">Open</a><button class="secondary" data-preview-turn="' + attr(r.turnId) + '" data-preview-path="' + attr(a.relativePath) + '">Preview</button></div></div>';
+      }).join("");
+      return '<div class="item"><strong>' + esc(r.turnId) + " - " + files.length + "/" + r.fileCount + " files - " + fmtBytes(r.totalSizeBytes) + "</strong><small>" + fmtDate(r.updatedAt) + " / " + esc(r.source || "turn") + '</small><div class="row"><a href="/api/artifacts/zip?turnId=' + encodeURIComponent(r.turnId) + '">Download ZIP</a><button data-del-art="' + esc(r.turnId) + '" class="danger"' + disabledAttr("files.write") + '>Delete</button></div><div class="gallery">' + gallery + "</div></div>";
+    }).join("") || '<div class="item">No artifacts.</div>';
+    document.querySelectorAll("[data-artifact-select]").forEach((c) => c.onchange = () => {
+      if (c.checked) state.selectedArtifactTurns.add(c.dataset.artifactSelect);
+      else state.selectedArtifactTurns.delete(c.dataset.artifactSelect);
+    });
+    document.querySelectorAll("[data-del-art]").forEach((b) => b.onclick = () => safe(async () => {
+      if (!can("files.write")) {
+        toast("Permission required: files.write");
+        return;
+      }
+      if (confirm("Delete artifact turn " + b.dataset.delArt + "?")) {
+        await api("/api/artifacts?turnId=" + encodeURIComponent(b.dataset.delArt), { method: "DELETE" });
+        state.selectedArtifactTurns.delete(b.dataset.delArt);
+        loadArtifacts();
+      }
+    }));
+    document.querySelectorAll("[data-preview-turn]").forEach((b) => b.onclick = () => safe(() => previewArtifact(b.dataset.previewTurn, b.dataset.previewPath)));
+    applyPermissions();
+  }
+  document.getElementById("reloadArtifactsBtn").onclick = loadArtifacts;
+  document.getElementById("artifactSearch").oninput = renderArtifacts;
+  document.getElementById("artifactKind").onchange = renderArtifacts;
+  document.getElementById("zipSelectedArtifactsBtn").onclick = () => {
+    const turnIds = [...state.selectedArtifactTurns];
+    if (turnIds.length === 0) {
+      toast("No artifact turns selected");
+      return;
+    }
+    turnIds.forEach((turnId) => window.open("/api/artifacts/zip?turnId=" + encodeURIComponent(turnId), "_blank"));
+  };
+  document.getElementById("deleteSelectedArtifactsBtn").onclick = () => safe(async () => {
+    if (!can("files.write")) {
+      toast("Permission required: files.write");
+      return;
+    }
+    const turnIds = [...state.selectedArtifactTurns];
+    if (turnIds.length === 0) {
+      toast("No artifact turns selected");
+      return;
+    }
+    if (confirm("Delete " + turnIds.length + " selected artifact turn(s)?")) {
+      const r = await api("/api/artifacts/bulk", { method: "POST", body: JSON.stringify({ action: "delete", turnIds }) });
+      state.selectedArtifactTurns.clear();
+      toast("Deleted " + (r.removed || []).length + " artifact turn(s)");
+      loadArtifacts();
+    }
+  });
+  function highlightCode(text) {
+    return esc(text).replace(/\\b(import|export|const|let|function|return|if|else|for|while|class|interface|type|async|await)\\b/g, '<span class="chip">$1</span>');
+  }
+  async function previewArtifact(turnId, path) {
+    const target = document.getElementById("artifactPreview");
+    target.innerHTML = '<div class="panel">' + loadingHtml("Loading preview...") + "</div>";
+    target.scrollIntoView({ block: "start", behavior: "smooth" });
+    try {
+      const data = await api("/api/artifacts/preview?turnId=" + encodeURIComponent(turnId) + "&path=" + encodeURIComponent(path));
+      if (data.kind === "image") {
+        target.innerHTML = '<div class="panel"><h2>' + esc(data.name) + '</h2><img src="/api/artifacts/file?turnId=' + encodeURIComponent(turnId) + "&path=" + encodeURIComponent(path) + '"></div>';
+        return;
+      }
+      if (data.kind === "text") {
+        target.innerHTML = '<div class="panel"><h2>' + esc(data.name) + " " + fmtBytes(data.sizeBytes) + "</h2><pre>" + highlightCode(data.text || "") + "</pre>" + (data.truncated ? "<small>Preview truncated.</small>" : "") + "</div>";
+        return;
+      }
+      target.innerHTML = '<div class="panel"><h2>' + esc(data.name) + "</h2><p>" + esc(data.detail || "Preview unavailable") + "</p></div>";
+    } catch (err) {
+      target.innerHTML = '<div class="panel"><h2>Preview failed</h2><p>' + esc(err.message || String(err)) + "</p></div>";
+      throw err;
+    }
+  }
+  async function loadActivity() {
+    setLoading("activityList", "Loading activity...");
+    const q = "?source=" + encodeURIComponent(val("activitySource")) + "&status=" + encodeURIComponent(val("activityStatus")) + "&limit=" + encodeURIComponent(val("activityLimit") || "100");
+    const data = await api("/api/activity" + q);
+    state.activityEvents = data.events || [];
+    renderActivity(state.activityEvents);
+  }
+  function activityWorkspace(e) {
+    const active = state.snapshot?.session;
+    return e.workspace || (active?.threadId && e.threadId === active.threadId ? active.workspace : "");
+  }
+  function activityMetaHtml(e) {
+    const workspace = activityWorkspace(e);
+    const duration = typeof e.durationMs === "number" ? fmtDuration(e.durationMs) : "";
+    const parts = [];
+    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));
+    return parts.join(" | ");
+  }
+  function renderActivity(events) {
+    const since = val("activitySince") ? new Date(val("activitySince")).getTime() : 0;
+    const filtered = (events || []).filter((e) => !since || new Date(e.timestamp).getTime() >= since);
+    document.getElementById("activityList").innerHTML = filtered.map((e) => {
+      const meta = activityMetaHtml(e);
+      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.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.getElementById("loadActivityBtn").onclick = () => loadActivity();
+  document.getElementById("activitySince").onchange = () => renderActivity(state.activityEvents || []);
+  document.getElementById("exportActivityBtn").onclick = () => {
+    const rows = (state.activityEvents || []).map((e) => [e.timestamp, e.source, e.status, e.type, e.threadId || "", e.prompt || e.detail || ""].join("\\t")).join("\\n");
+    const blob = new Blob([rows], { type: "text/tab-separated-values" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = "nordrelay-activity.tsv";
+    a.click();
+    URL.revokeObjectURL(a.href);
+  };
+  async function loadSettings() {
+    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", "Operations", "Artifacts", "Workspace", "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>";
+  }
+  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 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") + '"><label>' + esc(s.label) + "</label>" + 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();
+    });
+    bindSettingsUx();
+  }
+  function settingAttrs(s, original) {
+    return ' data-setting="' + attr(s.key) + '" data-original-value="' + attr(original) + '" data-configured="' + (s.configured ? "true" : "false") + '"';
+  }
+  function settingInput(s) {
+    const display = s.configured ? s.value || "" : s.effectiveValue || "";
+    if (s.options) {
+      const blankLabel = s.effectiveValue ? "Use active default (" + s.effectiveValue + ")" : "Use active default";
+      return "<select" + settingAttrs(s, s.configured ? s.value : "") + '><option value="" ' + (!s.configured ? "selected" : "") + ">" + esc(blankLabel) + "</option>" + s.options.map((o) => '<option value="' + attr(o) + '" ' + (s.configured && s.value === o ? "selected" : "") + ">" + esc(o) + "</option>").join("") + "</select>";
+    }
+    if (s.kind === "boolean") {
+      const blankLabel = s.effectiveValue ? "Use active default (" + s.effectiveValue + ")" : "Use active default";
+      return "<select" + settingAttrs(s, s.configured ? s.value : "") + '><option value="" ' + (!s.configured ? "selected" : "") + ">" + esc(blankLabel) + '</option><option value="true" ' + (s.configured && s.value === "true" ? "selected" : "") + '>true</option><option value="false" ' + (s.configured && s.value === "false" ? "selected" : "") + ">false</option></select>";
+    }
+    const value = esc(display);
+    if (s.kind === "json") return '<textarea rows="4"' + settingAttrs(s, display) + ">" + value + "</textarea>";
+    return "<input" + settingAttrs(s, display) + ' value="' + value + '" ' + (s.kind === "secret" ? 'type="password"' : "") + ">";
+  }
+  function bindSettingsUx() {
+    document.querySelectorAll("[data-setting]").forEach((el) => {
+      el.oninput = markSettingDirty;
+      el.onchange = markSettingDirty;
+    });
+    document.querySelectorAll("[data-reset-setting]").forEach((b) => b.onclick = () => {
+      const input = document.querySelector('[data-setting="' + cssEscape(b.dataset.resetSetting) + '"]');
+      if (input) {
+        input.value = "";
+        markSettingDirty({ target: input });
+      }
+    });
+    document.querySelectorAll("[data-reveal-setting]").forEach((b) => b.onclick = () => {
+      const input = document.querySelector('[data-setting="' + cssEscape(b.dataset.revealSetting) + '"]');
+      if (input) {
+        input.type = input.type === "password" ? "text" : "password";
+        input.focus();
+      }
+    });
+  }
+  function markSettingDirty(e) {
+    const el = e.target;
+    const box = el.closest(".setting");
+    const dirty = el.value !== (el.dataset.originalValue ?? "");
+    box.classList.toggle("dirty", dirty);
+    const dirtyInputs = Array.from(document.querySelectorAll("[data-setting]")).filter((x) => x.value !== (x.dataset.originalValue ?? ""));
+    const restart = dirtyInputs.some((x) => x.closest(".setting")?.dataset.restartRequired === "true");
+    document.getElementById("settingsStatus").textContent = dirtyInputs.length ? dirtyInputs.length + " unsaved change(s)" : "";
+    const banner = document.getElementById("settingsRestartBanner");
+    if (banner) banner.innerHTML = restart ? '<div class="restart-banner">Some changed settings require a NordRelay restart.</div>' : "";
+  }
+  document.getElementById("saveSettingsBtn").onclick = () => safe(async () => {
+    if (!can("settings.write")) {
+      toast("Permission required: settings.write");
+      return;
+    }
+    document.querySelectorAll(".setting-error").forEach((e) => e.textContent = "");
+    const patch = {};
+    document.querySelectorAll("[data-setting]").forEach((el) => {
+      const original = el.dataset.originalValue ?? "";
+      if (el.value !== original) patch[el.dataset.setting] = el.value;
+    });
+    const r = await api("/api/settings", { method: "PATCH", body: JSON.stringify({ settings: patch }) });
+    (r.errors || []).forEach((err) => {
+      const box = document.querySelector('[data-setting-box="' + cssEscape(err.key) + '"] .setting-error');
+      if (box) box.textContent = err.message;
+    });
+    document.getElementById("settingsStatus").textContent = r.errors && r.errors.length ? "Fix " + r.errors.length + " setting error(s)" : r.changedKeys.length ? "Saved " + r.changedKeys.length + " setting(s)" + (r.restartRequired ? " - restart required" : "") : "No changes";
+    toast(r.errors && r.errors.length ? "Settings need attention" : "Settings saved");
+    if (!(r.errors && r.errors.length)) await loadSettings();
+  });
+  document.getElementById("restartBtn").onclick = () => safe(async () => {
+    if (!can("system.restart")) {
+      toast("Permission required: system.restart");
+      return;
+    }
+    if (confirm("Restart NordRelay now?")) {
+      await api("/api/runtime/restart", { method: "POST" });
+      toast("Restart requested");
+    }
+  });
+  async function loadAccess() {
+    if (!can("users.read")) {
+      document.getElementById("accessPanel").innerHTML = '<div class="item">Permission required: users.read</div>';
+      return;
+    }
+    setLoading("accessPanel", "Loading users...");
+    const d = await api("/api/users");
+    state.userManagement = d;
+    renderUserManagement(d);
+    if (can("sessions.read")) await loadLocks();
+    else document.getElementById("locksList").innerHTML = '<div class="item">Permission required: sessions.read</div>';
+    if (can("audit.read")) await loadAudit();
+    else document.getElementById("auditList").innerHTML = '<div class="item">Permission required: audit.read</div>';
+  }
+  document.getElementById("loadAccessBtn").onclick = () => loadAccess();
+  function groupOptions(selected = []) {
+    const selectedSet = new Set(selected);
+    return (state.userManagement?.groups || []).map((g) => '<label class="checkbox"><input type="checkbox" data-group-choice="' + attr(g.id) + '" ' + (selectedSet.has(g.id) ? "checked" : "") + "> " + esc(g.name) + "</label>").join("");
+  }
+  function permissionOptions(selected = []) {
+    const selectedSet = new Set(selected);
+    return '<div class="permission-grid full-span">' + (state.userManagement?.permissions || []).map((p) => '<label class="checkbox"><input type="checkbox" data-permission-choice="' + attr(p) + '" ' + (selectedSet.has(p) ? "checked" : "") + "> " + esc(p) + "</label>").join("") + "</div>";
+  }
+  function selectedValues(selector) {
+    return Array.from(document.querySelectorAll(selector + ":checked")).map((x) => x.dataset.groupChoice || x.dataset.permissionChoice || x.value).filter(Boolean);
+  }
+  function csv(values = []) {
+    return (values || []).join(", ");
+  }
+  function adminDialog(title, body, onSubmit) {
+    const dialog = document.getElementById("adminDialog");
+    document.getElementById("adminDialogTitle").textContent = title;
+    document.getElementById("adminDialogBody").innerHTML = body;
+    document.getElementById("adminDialogCancel").onclick = () => dialog.close();
+    document.getElementById("adminDialogForm").onsubmit = (e) => safe(async () => {
+      e.preventDefault();
+      await onSubmit();
+      dialog.close();
+      await loadAccess();
+    }, e);
+    dialog.showModal();
+  }
+  function userGroups(u) {
+    return (u.groups || []).map((g) => g.id);
+  }
+  function renderUserManagement(d) {
+    document.getElementById("accessPanel").innerHTML = (d.users || []).map((u) => {
+      const telegram = (u.telegramIdentities || []).map((t) => t.telegramUserId + (t.username ? " @" + t.username : "") + ' <button class="secondary mini-button" data-telegram-user="' + attr(u.id) + '" data-telegram-unlink="' + attr(t.id) + '"' + disabledAttr("users.write") + ">Unlink</button>").join(" ");
+      return '<div class="item"><strong>' + esc(u.displayName) + ' <span class="adapter-status ' + (u.active ? "enabled" : "disabled") + '">' + (u.active ? "active" : "disabled") + "</span></strong><small>" + esc(u.email + " / " + u.id) + "</small><small>Groups: " + esc((u.groups || []).map((g) => g.name).join(", ") || "-") + "</small><small>Telegram: " + (telegram || "-") + "</small><small>Web sessions: " + esc(String((u.webSessions || []).length)) + '</small><div class="row"><button 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><button class="secondary" data-user-code="' + attr(u.id) + '"' + disabledAttr("users.write") + '>Telegram code</button><button class="secondary" data-user-link="' + attr(u.id) + '"' + disabledAttr("users.write") + '>Link Telegram ID</button><button class="secondary" data-user-password="' + attr(u.id) + '"' + disabledAttr("users.write") + '>Set password</button><button class="danger" data-user-revoke="' + attr(u.id) + '"' + disabledAttr("users.write") + ">Revoke sessions</button></div></div>";
+    }).join("") || '<div class="item">No users.</div>';
+    document.getElementById("groupsList").innerHTML = (d.groups || []).map((g) => '<div class="item"><strong>' + esc(g.name) + " " + (g.system ? '<span class="chip">system</span>' : "") + "</strong><small>" + esc(g.description || "") + "</small><small>Permissions: " + esc((g.permissions || []).join(", ") || "-") + "</small><small>Agent scope: " + esc(csv(g.agentIds) || "all") + "</small><small>Workspace scope: " + esc(csv(g.workspaceRoots) || "all") + "</small><small>Telegram chat scope: " + esc(csv(g.telegramChatIds) || "all") + '</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.</div>';
+    document.getElementById("telegramChatsList").innerHTML = (d.telegramChats || []).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>" + esc("Chat ID: " + c.chatId + " / " + (c.type || "-")) + "</small><small>Groups: " + esc((c.allowedGroupIds || []).join(", ") || "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>';
+    bindUserButtons();
+    applyPermissions();
+  }
+  function bindUserButtons() {
+    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(async () => {
+      const r = await api("/api/users/" + encodeURIComponent(b.dataset.userCode) + "/telegram", { method: "POST", body: JSON.stringify({ createCode: true }) });
+      toast("Telegram link code: " + r.linkCode.code + " (expires " + fmtDate(r.linkCode.expiresAt) + ")", { duration: 15e3 });
+    }));
+    document.querySelectorAll("[data-user-link]").forEach((b) => b.onclick = () => openTelegramLinkDialog(b.dataset.userLink));
+    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-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-group-edit]").forEach((b) => b.onclick = () => {
+      const g = (state.userManagement?.groups || []).find((x) => x.id === b.dataset.groupEdit);
+      if (g) openGroupDialog(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();
+    }));
+  }
+  function openUserDialog(u) {
+    adminDialog(u ? "Edit user" : "Create user", '<label>Email<input id="dlgEmail" value="' + attr(u?.email || "") + '"></label><label>Display name<input id="dlgName" value="' + attr(u?.displayName || "") + '"></label>' + (!u ? '<label>Password<input id="dlgPassword" type="password" autocomplete="new-password"></label>' : "") + '<label class="checkbox"><input id="dlgActive" type="checkbox" ' + (!u || u.active ? "checked" : "") + '> Active</label><div class="full-span"><strong>Groups</strong><div class="row">' + groupOptions(u ? userGroups(u) : ["user"]) + "</div></div>", async () => {
+      const payload = { email: val("dlgEmail"), displayName: val("dlgName"), active: document.getElementById("dlgActive").checked, groupIds: selectedValues("[data-group-choice]") };
+      if (!u) payload.password = val("dlgPassword");
+      await api(u ? "/api/users/" + encodeURIComponent(u.id) : "/api/users", { method: u ? "PATCH" : "POST", body: JSON.stringify(payload) });
+      toast(u ? "User updated" : "User created");
+    });
+  }
+  function openPasswordDialog(id) {
+    adminDialog("Set password", '<label class="full-span">New password<input id="dlgPassword" type="password" autocomplete="new-password"></label>', async () => {
+      await api("/api/users/" + encodeURIComponent(id) + "/password", { method: "POST", body: JSON.stringify({ password: val("dlgPassword") }) });
+      toast("Password updated");
+    });
+  }
+  function openTelegramLinkDialog(id) {
+    adminDialog("Link Telegram ID", '<label>Telegram user ID<input id="dlgTelegramId" type="number"></label><label>Username<input id="dlgUsername"></label>', async () => {
+      await api("/api/users/" + encodeURIComponent(id) + "/telegram", { method: "POST", body: JSON.stringify({ telegramUserId: Number(val("dlgTelegramId")), username: val("dlgUsername") || void 0 }) });
+      toast("Telegram linked");
+    });
+  }
+  function openGroupDialog(g) {
+    adminDialog(g ? "Edit group" : "Create group", '<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">Agent scope, comma-separated<input id="dlgAgentIds" value="' + attr(csv(g?.agentIds)) + '" placeholder="empty means all"></label><label class="full-span">Workspace scope, comma-separated<input id="dlgWorkspaceRoots" value="' + attr(csv(g?.workspaceRoots)) + '" placeholder="empty means all"></label><label class="full-span">Telegram chat scope, comma-separated<input id="dlgTelegramChatIds" value="' + attr(csv(g?.telegramChatIds)) + '" placeholder="empty means all"></label><strong class="full-span">Permissions</strong>' + permissionOptions(g?.permissions || ["inspect", "sessions.read"]), async () => {
+      const payload = { name: val("dlgGroupName"), description: val("dlgGroupDescription"), permissions: selectedValues("[data-permission-choice]"), agentIds: csvToList(val("dlgAgentIds")), workspaceRoots: csvToList(val("dlgWorkspaceRoots")), telegramChatIds: csvToList(val("dlgTelegramChatIds")).map(Number).filter(Number.isInteger) };
+      await api(g ? "/api/groups/" + encodeURIComponent(g.id) : "/api/groups", { method: g ? "PATCH" : "POST", body: JSON.stringify(payload) });
+      toast(g ? "Group updated" : "Group created");
+    });
+  }
+  function openChatDialog(c) {
+    adminDialog(c ? "Edit Telegram chat" : "Add Telegram chat", '<label>Chat ID<input id="dlgChatId" type="number" value="' + attr(c?.chatId || "") + '" ' + (c ? "disabled" : "") + '></label><label>Title<input id="dlgChatTitle" value="' + attr(c?.title || "") + '"></label><label>Type<input id="dlgChatType" value="' + attr(c?.type || "supergroup") + '"></label><label class="checkbox"><input id="dlgChatEnabled" type="checkbox" ' + (!c || c.enabled ? "checked" : "") + '> Enabled</label><div class="full-span"><strong>Allowed groups</strong><div class="row">' + groupOptions(c?.allowedGroupIds || []) + "</div><small>Leave empty to allow every group.</small></div>", async () => {
+      const payload = { chatId: Number(val("dlgChatId")), title: val("dlgChatTitle") || void 0, type: val("dlgChatType") || void 0, enabled: document.getElementById("dlgChatEnabled").checked, allowedGroupIds: selectedValues("[data-group-choice]") };
+      await api(c ? "/api/telegram-chats/" + encodeURIComponent(c.id) : "/api/telegram-chats", { method: c ? "PATCH" : "POST", body: JSON.stringify(payload) });
+      toast(c ? "Chat updated" : "Chat added");
+    });
+  }
+  function csvToList(text) {
+    return (text || "").split(",").map((x) => x.trim()).filter(Boolean);
+  }
+  document.getElementById("createUserBtn").onclick = () => {
+    if (!can("users.write")) {
+      toast("Permission required: users.write");
+      return;
+    }
+    openUserDialog(null);
+  };
+  document.getElementById("createGroupBtn").onclick = () => {
+    if (!can("users.write")) {
+      toast("Permission required: users.write");
+      return;
+    }
+    openGroupDialog(null);
+  };
+  document.getElementById("createChatBtn").onclick = () => {
+    if (!can("users.write")) {
+      toast("Permission required: users.write");
+      return;
+    }
+    openChatDialog(null);
+  };
+  async function loadLocks() {
+    if (!can("sessions.read")) {
+      document.getElementById("locksList").innerHTML = '<div class="item">Permission required: sessions.read</div>';
+      return;
+    }
+    const d = await api("/api/locks");
+    document.getElementById("locksList").innerHTML = (d.locks || []).map((l) => '<div class="item"><strong>' + esc(l.contextKey) + "</strong><small>" + esc((l.ownerName || "owner") + " / " + l.ownerId + " / expires " + fmtDate(l.expiresAt)) + "</small></div>").join("") || '<div class="item">No active locks.</div>';
+  }
+  document.getElementById("lockSessionBtn").onclick = () => safe(async () => {
+    if (!can("sessions.write")) {
+      toast("Permission required: sessions.write");
+      return;
+    }
+    await api("/api/locks", { method: "POST", body: JSON.stringify({ ownerName: "Web dashboard" }) });
+    toast("Web session locked");
+    loadLocks();
+  });
+  document.getElementById("unlockSessionBtn").onclick = () => safe(async () => {
+    if (!can("sessions.write")) {
+      toast("Permission required: sessions.write");
+      return;
+    }
+    await api("/api/locks", { method: "DELETE" });
+    toast("Web session unlocked");
+    loadLocks();
+  });
+  async function loadAudit() {
+    if (!can("audit.read")) {
+      document.getElementById("auditList").innerHTML = '<div class="item">Permission required: audit.read</div>';
+      return;
+    }
+    const d = await api("/api/audit?limit=" + encodeURIComponent(val("auditLimit") || "50"));
+    document.getElementById("auditList").innerHTML = (d.events || []).map((e) => '<div class="item"><strong>' + esc(fmtDate(e.timestamp) + " / " + (e.channelId || "-") + " / " + e.status + " / " + e.action) + "</strong><small>" + esc((e.contextKey || "-") + " / " + (e.agentId || "-") + " / " + (e.threadId || "-")) + "</small><small>" + esc(e.description || e.detail || "") + "</small></div>").join("") || '<div class="item">No audit events.</div>';
+  }
+  document.getElementById("loadAuditBtn").onclick = () => loadAudit();
+  async function loadLogs() {
+    if (!document.getElementById("logAutoRefresh").checked) setLoading("logs", "Loading logs...");
+    const target = document.getElementById("logTarget").value;
+    const lines = document.getElementById("logLines").value;
+    const data = await api("/api/logs?target=" + target + "&lines=" + lines);
+    state.logsPlain = data.plain || "";
+    renderLogs();
+    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 logTimeOf(line) {
+    const m = line.match(/^(\\d{4}-\\d{2}-\\d{2} \\d{2}:\\d{2}:\\d{2})/);
+    return m ? new Date(m[1].replace(" ", "T")).getTime() : 0;
+  }
+  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)";
+  }
+  document.getElementById("logLevel").onchange = renderLogs;
+  document.getElementById("logSearch").oninput = renderLogs;
+  document.getElementById("logSince").onchange = renderLogs;
+  document.getElementById("logAutoRefresh").onchange = (e) => {
+    clearInterval(state.logTimer);
+    state.logTimer = null;
+    if (e.target.checked) state.logTimer = setInterval(loadLogs, 5e3);
+  };
+  document.getElementById("downloadLogsBtn").onclick = () => {
+    const blob = new Blob([state.logsPlain || ""], { type: "text/plain" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = "nordrelay-log.txt";
+    a.click();
+    URL.revokeObjectURL(a.href);
+  };
+  document.getElementById("clearLogsBtn").onclick = () => safe(async () => {
+    if (!can("logs.clear")) {
+      toast("Permission required: logs.clear");
+      return;
+    }
+    const target = document.getElementById("logTarget").value;
+    if (confirm("Clear " + target + " log?")) {
+      await api("/api/logs/clear", { method: "POST", body: JSON.stringify({ target }) });
+      state.logsPlain = "";
+      renderLogs();
+      toast("Cleared " + target + " log");
+    }
+  });
+  async function loadAdapterHealth() {
+    setLoading("adapterHealth", "Loading adapters...");
+    const d = await api("/api/adapters/health");
+    document.getElementById("adapterHealth").innerHTML = (d.adapters || []).map((a) => '<div class="item"><strong>' + esc(a.label) + ' <span class="adapter-status ' + esc(a.status) + '">' + esc(a.status) + "</span></strong><small>" + esc("CLI: " + (a.cli.label || "-") + " / path " + (a.cli.path || "-") + " / version " + (a.cli.version || "-")) + "</small><small>" + esc("Auth: " + (a.auth.supported ? a.auth.authenticated ? "authenticated" : "not authenticated" : "not managed") + " " + (a.auth.detail || "")) + "</small><small>" + esc("Version: " + a.version.installed + " / latest " + (a.version.latest || "-") + " / " + a.version.status) + "</small>" + featureMatrix(a.capabilities) + '<div class="row"><button data-auth-status="' + attr(a.id) + '">Auth status</button><button data-auth-login="' + attr(a.id) + '" class="secondary" ' + (!a.capabilities.login ? "disabled" : "") + disabledAttr("auth.manage") + '>Login</button><button data-auth-logout="' + attr(a.id) + '" class="secondary" ' + (!a.capabilities.logout ? "disabled" : "") + disabledAttr("auth.manage") + ">Logout</button></div></div>").join("") || '<div class="item">No adapters.</div>';
+    document.querySelectorAll("[data-auth-status]").forEach((b) => b.onclick = () => safe(async () => {
+      const r = await api("/api/auth/status?agent=" + encodeURIComponent(b.dataset.authStatus));
+      toast(r.agentLabel + ": " + r.detail, { duration: 6e3 });
+    }));
+    document.querySelectorAll("[data-auth-login]").forEach((b) => b.onclick = () => safe(async () => {
+      if (!can("auth.manage")) {
+        toast("Permission required: auth.manage");
+        return;
+      }
+      const r = await api("/api/auth/login", { method: "POST", body: JSON.stringify({ agentId: b.dataset.authLogin }) });
+      toast(r.result?.message || r.detail, { duration: 8e3 });
+      loadAdapterHealth();
+    }));
+    document.querySelectorAll("[data-auth-logout]").forEach((b) => b.onclick = () => safe(async () => {
+      if (!can("auth.manage")) {
+        toast("Permission required: auth.manage");
+        return;
+      }
+      const r = await api("/api/auth/logout", { method: "POST", body: JSON.stringify({ agentId: b.dataset.authLogout }) });
+      toast(r.result?.message || r.detail, { duration: 8e3 });
+      loadAdapterHealth();
+    }));
+    applyPermissions();
+  }
+  document.getElementById("reloadAdaptersBtn").onclick = () => loadAdapterHealth();
+  const versionAgentIds = { codex: "codex", pi: "pi", hermes: "hermes", openclaw: "openclaw", claudeCode: "claude-code" };
+  async function loadVersion() {
+    setLoading("versionPanel", "Checking versions...");
+    if (can("updates.run")) await loadAgentUpdateJobs(false);
+    else {
+      state.agentUpdateJobs = [];
+      renderAgentUpdateJobs();
+    }
+    const d = await api("/api/version");
+    const checks = d.versionChecks || {};
+    document.getElementById("versionPanel").innerHTML = Object.entries(checks).map(([key, v]) => versionCard(key, v)).join("") + card("Runtime", [["Status", d.state?.status], ["Version", d.health?.version], ["Codex CLI", d.health?.codexCli], ["Pi CLI", d.health?.piCli], ["Hermes CLI", d.health?.hermesCli], ["OpenClaw CLI", d.health?.openClawCli], ["Claude Code CLI", d.health?.claudeCodeCli]]);
+    bindAgentUpdateButtons();
+    applyPermissions();
+  }
+  function versionCard(key, v) {
+    const agentId = versionAgentIds[key];
+    const running = agentId && state.agentUpdateJobs.some((j) => j.agentId === agentId && j.status === "running");
+    const button = agentId && v.status === "outdated" ? '<button class="secondary mini-button" data-update-agent="' + attr(agentId) + '" ' + (running ? "disabled" : "") + ">" + (running ? "Updating" : "Update") + "</button>" : "";
+    return '<div class="item"><strong>' + esc(v.label) + ' <span class="adapter-status ' + esc(versionStatusClass(v.status)) + '">' + esc(versionStatusLabel(v.status)) + "</span> " + button + "</strong><small>" + esc("Installed: " + (v.installedLabel || "-")) + "</small><small>" + esc("Latest: " + (v.latestVersion || "-")) + "</small>" + (v.detail ? "<small>" + esc(v.detail) + "</small>" : "") + "</div>";
+  }
+  async function loadAgentUpdateJobs(showLoading = true) {
+    if (!can("updates.run")) {
+      state.agentUpdateJobs = [];
+      const target = document.getElementById("agentUpdateJobs");
+      if (target) target.innerHTML = '<div class="item">Permission required: updates.run</div>';
+      return;
+    }
+    if (showLoading) setLoading("agentUpdateJobs", "Loading update jobs...");
+    const d = await api("/api/agent-updates");
+    state.agentUpdateJobs = d.jobs || [];
+    renderAgentUpdateJobs();
+  }
+  function upsertAgentUpdateJob(job) {
+    if (!job) return;
+    const index = state.agentUpdateJobs.findIndex((j) => j.id === job.id);
+    if (index >= 0) state.agentUpdateJobs[index] = job;
+    else state.agentUpdateJobs.unshift(job);
+  }
+  function renderAgentUpdateJobs() {
+    const target = document.getElementById("agentUpdateJobs");
+    if (!target) return;
+    if (!can("updates.run")) {
+      target.innerHTML = '<div class="item">Permission required: updates.run</div>';
+      return;
+    }
+    target.innerHTML = (state.agentUpdateJobs || []).map(updateJobCard).join("") || '<div class="item">No agent update jobs.</div>';
+    bindAgentUpdateButtons();
+    applyPermissions();
+  }
+  function updateJobCard(job) {
+    const command = [job.command].concat(job.args || []).join(" ");
+    const needs = job.needsInput ? '<small><span class="chip warn">Input may be required</span></small>' : "";
+    const logDeleted = job.logDeletedAt ? "<small>Log deleted " + esc(fmtDate(job.logDeletedAt)) + "</small>" : "";
+    const deleteLogButton = job.status !== "running" && !job.logDeletedAt ? '<button class="danger mini-button" data-update-delete-log="' + attr(job.id) + '"' + disabledAttr("updates.run") + ">Delete Log</button>" : "";
+    const input = job.canInput ? '<div class="update-input"><input data-update-input="' + attr(job.id) + '" placeholder="Send response to update process"><button data-update-send="' + attr(job.id) + '" class="secondary"' + disabledAttr("updates.run") + '>Send</button><button data-update-cancel="' + attr(job.id) + '" class="danger"' + disabledAttr("updates.run") + ">Cancel</button></div>" : "";
+    return '<div class="item"><div class="update-job-header"><strong>' + esc(job.agentLabel) + ' <span class="adapter-status ' + esc(jobStatusClass(job.status)) + '">' + esc(job.status) + '</span></strong><div class="row">' + deleteLogButton + "</div></div><small>" + esc(job.method + " / " + fmtDate(job.startedAt) + (job.finishedAt ? " - " + fmtDate(job.finishedAt) : "")) + "</small><small>" + esc(command) + "</small><small>" + esc(job.error || job.summary || "") + "</small>" + logDeleted + needs + '<pre class="update-log">' + esc(job.outputTail || (job.logDeletedAt ? "(log deleted)" : "(waiting for output)")) + "</pre>" + input + "</div>";
+  }
+  function bindAgentUpdateButtons() {
+    document.querySelectorAll("[data-update-agent]").forEach((b) => b.onclick = () => safe(async () => {
+      if (!can("updates.run")) {
+        toast("Permission required: updates.run");
+        return;
+      }
+      if (confirm("Start update for " + b.dataset.updateAgent + "?")) {
+        const r = await api("/api/agent-update", { method: "POST", body: JSON.stringify({ agentId: b.dataset.updateAgent }) });
+        upsertAgentUpdateJob(r.job);
+        renderAgentUpdateJobs();
+        toast(r.job.agentLabel + " update started", { duration: 6e3 });
+        loadVersion();
+      }
+    }));
+    document.querySelectorAll("[data-update-send]").forEach((b) => b.onclick = () => safe(async () => {
+      if (!can("updates.run")) {
+        toast("Permission required: updates.run");
+        return;
+      }
+      const input = document.querySelector('[data-update-input="' + cssEscape(b.dataset.updateSend) + '"]');
+      const text = input?.value || "";
+      if (!text.trim()) return;
+      const r = await api("/api/agent-update/" + encodeURIComponent(b.dataset.updateSend) + "/input", { method: "POST", body: JSON.stringify({ input: text }) });
+      if (input) input.value = "";
+      upsertAgentUpdateJob(r.job);
+      renderAgentUpdateJobs();
+    }));
+    document.querySelectorAll("[data-update-cancel]").forEach((b) => b.onclick = () => safe(async () => {
+      if (!can("updates.run")) {
+        toast("Permission required: updates.run");
+        return;
+      }
+      if (confirm("Cancel this update job?")) {
+        const r = await api("/api/agent-update/" + encodeURIComponent(b.dataset.updateCancel) + "/cancel", { method: "POST" });
+        upsertAgentUpdateJob(r.job);
+        renderAgentUpdateJobs();
+      }
+    }));
+    document.querySelectorAll("[data-update-delete-log]").forEach((b) => b.onclick = () => safe(async () => {
+      if (!can("updates.run")) {
+        toast("Permission required: updates.run");
+        return;
+      }
+      if (confirm("Delete update log for " + b.dataset.updateDeleteLog + "?")) {
+        const r = await api("/api/agent-update/" + encodeURIComponent(b.dataset.updateDeleteLog) + "/log", { method: "DELETE" });
+        state.agentUpdateJobs = (state.agentUpdateJobs || []).filter((j) => j.id !== (r.deletedId || b.dataset.updateDeleteLog));
+        renderAgentUpdateJobs();
+        toast("Agent update job deleted");
+      }
+    }));
+  }
+  document.getElementById("loadVersionBtn").onclick = () => loadVersion();
+  document.getElementById("updateBtn").onclick = () => safe(async () => {
+    if (!can("updates.run")) {
+      toast("Permission required: updates.run");
+      return;
+    }
+    if (confirm("Start NordRelay self-update now?")) {
+      const r = await api("/api/update", { method: "POST" });
+      toast("Update started via " + r.method + ". Log: " + r.logPath, { duration: 8e3 });
+      page("logs");
+      document.getElementById("logTarget").value = "update";
+      loadLogs();
+    }
+  });
+  async function loadDiagnostics() {
+    setLoading("diagnostics", "Loading diagnostics...");
+    const data = await api("/api/diagnostics");
+    document.getElementById("diagnostics").innerHTML = diagnosticsHtml(data);
+  }
+  function diagnosticsHtml(d) {
+    const h = d.health || {};
+    const s = d.snapshot?.session || {};
+    const vc = d.versionChecks || {};
+    const caps = s.capabilities || {};
+    const agentDiag = d.runtime?.agentDiagnostics;
+    return '<div class="list">' + card("Runtime", [["Status", h.state?.status], ["PID", h.state?.pid], ["App PID", h.state?.appPid], ["State", h.stateFile], ["Log", h.logFile], ["State backend", d.runtime?.stateBackend], ["Uptime", h.uptimeSeconds + "s"]]) + card("Agent", [["Agent", s.agentLabel], ["Thread", s.threadId], ["Workspace", s.workspace], ["Model", s.model], ["Reasoning", s.reasoningEffort], ["Fast", caps.fastMode ? s.fastMode ? "on" : "off" : "n/a"]]) + card("Agent State", (agentDiag?.lines || []).map((x) => [x.label, x.value])) + card("CLI Versions", Object.values(vc).map((v) => [v.label, (v.status === "current" ? "OK " : "WARN ") + (v.installedLabel || "-") + " latest " + (v.latestVersion || "-")])) + card("External Mirror", d.runtime?.externalMirror ? Object.entries(d.runtime.externalMirror) : [["Status", "idle"]]) + "</div>";
+  }
+  function card(title, rows) {
+    return '<div class="item"><strong>' + esc(title) + "</strong>" + rows.map((r) => "<small>" + esc(r[0]) + ": " + esc(r[1] ?? "-") + "</small>").join("") + "</div>";
+  }
+  function safe(fn, event) {
+    if (event && event.preventDefault) event.preventDefault();
+    Promise.resolve().then(fn).catch((err) => toast(err.message || String(err)));
+  }
+  loadBootstrap().then(() => connectEvents()).catch((err) => toast(err.message));
+})();