Show diagnostics log modal via header button; toggle visibility when enabled

pikit-web/assets/diaglog.js

@@ -48,8 +48,19 @@ export function logUi(msg, level = "info", meta) {
 }
 
 export async function initDiagUI({ elements, toast }) {
-  const { enableToggle, debugToggle, refreshBtn, clearBtn, copyBtn, downloadBtn, logBox, statusEl } =
-    elements;
+  const {
+    enableToggle,
+    debugToggle,
+    refreshBtn,
+    clearBtn,
+    copyBtn,
+    downloadBtn,
+    logBox,
+    statusEl,
+    logButton,
+    modal,
+    modalClose,
+  } = elements;
 
   const setBusy = (on) => {
     loading = on;
@@ -65,6 +76,8 @@ export async function initDiagUI({ elements, toast }) {
     uiLevel = state.level || "normal";
     if (enableToggle) enableToggle.checked = uiEnabled;
     if (debugToggle) debugToggle.checked = uiLevel === "debug";
+    if (logButton) logButton.classList.toggle("hidden", !uiEnabled);
+    if (modal && !uiEnabled) modal.classList.add("hidden");
     return data.entries || [];
   }
 
@@ -189,6 +202,15 @@ export async function initDiagUI({ elements, toast }) {
   attachClickTracker();
   await refresh();
 
+  logButton?.addEventListener("click", () => {
+    if (!uiEnabled) return;
+    modal?.classList.remove("hidden");
+  });
+  modalClose?.addEventListener("click", () => modal?.classList.add("hidden"));
+  modal?.addEventListener("click", (e) => {
+    if (e.target === modal) e.stopPropagation(); // prevent accidental close
+  });
+
   return {
     logUi,
     refresh,