From 650175913e8477809957b19636353b073693f654 Mon Sep 17 00:00:00 2001
From: Aaron <aaron@pikit.local>
Date: Sat, 13 Dec 2025 11:41:13 -0500
Subject: [PATCH] Move diagnostics log to modal; add header Log button

---
 pikit-web/assets/diaglog.css |  4 ++++
 pikit-web/assets/style.css   |  4 ++++
 pikit-web/index.html         | 35 ++++++++++++++++++++++++++++-------
 3 files changed, 36 insertions(+), 7 deletions(-)
 create mode 100644 pikit-web/assets/diaglog.css

diff --git a/pikit-web/assets/diaglog.css b/pikit-web/assets/diaglog.css
new file mode 100644
index 0000000..d77fd3a
--- /dev/null
+++ b/pikit-web/assets/diaglog.css
@@ -0,0 +1,4 @@
+.diag-log-modal .log-box {
+  max-height: 60vh;
+  min-height: 300px;
+}
diff --git a/pikit-web/assets/style.css b/pikit-web/assets/style.css
index 3c84c91..2c40b38 100644
--- a/pikit-web/assets/style.css
+++ b/pikit-web/assets/style.css
@@ -422,6 +422,10 @@ body {
   min-height: 220px;
   overflow-y: auto;
 }
+#diagModal pre.log-box {
+  max-height: 60vh;
+  min-height: 300px;
+}
 #releaseProgress {
   display: none;
 }
diff --git a/pikit-web/index.html b/pikit-web/index.html
index 7a4dfd9..0a9d8cf 100644
--- a/pikit-web/index.html
+++ b/pikit-web/index.html
@@ -33,6 +33,9 @@
         >
           <span id="themeToggleIcon" aria-hidden="true">&#127769;</span>
         </button>
+        <button id="diagLogBtn" class="ghost hidden" title="Diagnostics log (visible when enabled)">
+          Log
+        </button>
         <button id="releaseBtn" class="ghost" title="Pi-Kit updates">
           Update
         </button>
@@ -102,6 +105,29 @@
       </div>
     </div>
 
+    <div id="diagModal" class="modal hidden diag-log-modal">
+      <div class="modal-card wide">
+        <div class="panel-header sticky">
+          <div>
+            <p class="eyebrow">Diagnostics</p>
+            <h3>Diagnostics log</h3>
+            <p class="hint">RAM-only; cleared on reboot/clear. Use toggles in Settings → Diagnostics to enable.</p>
+          </div>
+          <button id="diagClose" class="ghost icon-btn close-btn" title="Close diagnostics log">
+            &times;
+          </button>
+        </div>
+        <div class="control-actions wrap gap">
+          <button id="diagRefreshBtn" class="ghost">Refresh</button>
+          <button id="diagClearBtn" class="ghost">Clear</button>
+          <button id="diagCopyBtn" class="ghost">Copy</button>
+          <button id="diagDownloadBtn" class="ghost">Download</button>
+          <span id="diagStatusModal" class="hint quiet"></span>
+        </div>
+        <pre id="diagLogBox" class="log-box" aria-live="polite"></pre>
+      </div>
+    </div>
+
     <div id="releaseModal" class="modal hidden">
       <div class="modal-card wide">
         <div class="panel-header sticky">
@@ -528,7 +554,7 @@
             </button>
             <div class="accordion-body" id="acc-diag">
               <p class="hint">
-                Temporary, RAM-only logs for debugging. Toggle on, choose debug for extra detail, then refresh/copy/download the log. Logs reset on reboot or clear.
+                Temporary, RAM-only logs for debugging. Toggle on, choose debug for extra detail. Logs reset on reboot or clear. Use the Log button in the top bar (visible when diagnostics is enabled) to view, copy, download, or clear entries.
               </p>
               <div class="control-actions split-row">
                 <label class="checkbox-row inline tight">
@@ -540,14 +566,9 @@
                   <span>Debug detail (includes UI clicks)</span>
                 </label>
               </div>
-              <div class="control-actions wrap gap">
-                <button id="diagRefreshBtn" class="ghost">Refresh log</button>
-                <button id="diagClearBtn" class="ghost">Clear</button>
-                <button id="diagCopyBtn" class="ghost">Copy</button>
-                <button id="diagDownloadBtn" class="ghost">Download</button>
+              <div class="control-actions">
                 <span id="diagStatus" class="hint quiet"></span>
               </div>
-              <pre id="diagLogBox" class="log-box" aria-live="polite"></pre>
               <p class="hint quiet">Stored in RAM (max ~1MB server, ~500 entries client). No data written to disk.</p>
             </div>
           </div>