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,

pikit-web/assets/main.js

@@ -6,7 +6,7 @@ import { initServiceControls, renderServices } from "./services.js";
 import { initSettings } from "./settings.js";
 import { initUpdateSettings, isUpdatesDirty } from "./update-settings.js";
 import { initReleaseUI } from "./releases.js?v=20251213h";
-import { initDiagUI, logUi } from "./diaglog.js?v=20251213h";
+import { initDiagUI, logUi } from "./diaglog.js?v=20251213i";
 
 const servicesGrid = document.getElementById("servicesGrid");
 const heroStats = document.getElementById("heroStats");
@@ -106,6 +106,10 @@ const diagCopyBtn = document.getElementById("diagCopyBtn");
 const diagDownloadBtn = document.getElementById("diagDownloadBtn");
 const diagLogBox = document.getElementById("diagLogBox");
 const diagStatus = document.getElementById("diagStatus");
+const diagLogBtn = document.getElementById("diagLogBtn");
+const diagModal = document.getElementById("diagModal");
+const diagClose = document.getElementById("diagClose");
+const diagStatusModal = document.getElementById("diagStatusModal");
 
 const TOAST_POS_KEY = "pikit-toast-pos";
 const TOAST_ANIM_KEY = "pikit-toast-anim";
@@ -578,7 +582,10 @@ function main() {
       copyBtn: diagCopyBtn,
       downloadBtn: diagDownloadBtn,
       logBox: diagLogBox,
-      statusEl: diagStatus,
+      statusEl: diagStatusModal || diagStatus,
+      logButton: diagLogBtn,
+      modal: diagModal,
+      modalClose: diagClose,
     },
     toast: showToast,
   }).catch((e) => {

pikit-web/index.html

@@ -777,7 +777,7 @@
       </div>
     </div>
 
-    <script type="module" src="assets/main.js?v=20251213h"></script>
+    <script type="module" src="assets/main.js?v=20251213i"></script>
     <div id="toastContainer" class="toast-container"></div>
   </body>
 </html>