Working on better version

data/index.html

@@ -167,6 +167,8 @@
             </div>
             <button onclick="clearTerminal()">Clear</button>
             <button onclick="reconnect()">Reconnect</button>
+            <button id="logBtn" onclick="toggleLog()">Log: --</button>
+            <button onclick="toggleFiles()">Files</button>
         </div>
         <div class="status">
             <div class="status-item">
@@ -184,6 +186,14 @@
         </div>
     </div>
     
+    <div id="filesPanel" style="display:none; background:#16213e; border-bottom:1px solid #0f3460; padding:10px 20px; max-height:40vh; overflow:auto;">
+        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
+            <strong>SD log files</strong>
+            <span><span id="logState" style="color:#aaa; margin-right:10px;"></span><button onclick="refreshLogs()">Refresh</button></span>
+        </div>
+        <table id="filesTable" style="width:100%; border-collapse:collapse; font-size:0.85em;"></table>
+    </div>
+
     <div class="terminal-container">
         <div id="terminal"></div>
     </div>
@@ -315,6 +325,7 @@
                     document.getElementById('baudSelect').value = msg.baudSerial1;
                     updateStatus('btStatus', msg.btConnected);
                     document.getElementById('heap').textContent = `Heap: ${msg.freeHeap}`;
+                    updateLogUi(msg);
                     
                     // Show WiFi info
                     const wifiInfo = document.getElementById('wifiInfo');
@@ -406,6 +417,52 @@
             if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
             return (bytes / 1024 / 1024).toFixed(1) + ' MB';
         }
+
+        // ---- SD logging controls ----
+        let logOn = false;
+        function toggleLog() {
+            fetch('/api/log?on=' + (logOn ? 0 : 1))
+                .then(r => r.json()).then(updateLogUi)
+                .catch(() => term.writeln('\r\n\x1b[31m[log toggle failed]\x1b[0m'));
+        }
+        function updateLogUi(s) {
+            if (typeof s.log === 'undefined') return;
+            logOn = !!s.log;
+            const b = document.getElementById('logBtn');
+            b.textContent = 'Log: ' + (logOn ? 'ON' : 'off');
+            b.classList.toggle('danger', logOn);
+            const st = document.getElementById('logState');
+            if (st) {
+                st.textContent = !s.sd ? 'no SD card'
+                    : s.logfile ? ('file: ' + String(s.logfile).split('/').pop())
+                    : (s.ntp ? 'idle' : 'waiting for NTP date');
+            }
+        }
+        function toggleFiles() {
+            const p = document.getElementById('filesPanel');
+            const show = p.style.display === 'none';
+            p.style.display = show ? 'block' : 'none';
+            if (show) refreshLogs();
+        }
+        function refreshLogs() {
+            fetch('/api/logs').then(r => r.json()).then(list => {
+                const t = document.getElementById('filesTable');
+                if (!list.length) { t.innerHTML = '<tr><td style="color:#666;">(no log files yet)</td></tr>'; return; }
+                t.innerHTML = list.map(f =>
+                    `<tr style="border-bottom:1px solid #0f3460;">
+                       <td style="padding:4px 0;">${f.name}${f.active ? ' <span style="color:#4ade80;">(active)</span>' : ''}</td>
+                       <td style="text-align:right; color:#aaa;">${formatBytes(f.size)}</td>
+                       <td style="text-align:right; padding-left:12px;"><a href="/api/logfile?name=${encodeURIComponent(f.name)}" style="color:#60a5fa;">download</a></td>
+                       <td style="text-align:right; padding-left:12px;">${f.active ? '' : `<a href="#" onclick="deleteLog('${f.name}');return false;" style="color:#e94560;">delete</a>`}</td>
+                     </tr>`).join('');
+            }).catch(() => {
+                document.getElementById('filesTable').innerHTML = '<tr><td style="color:#e94560;">(failed -- SD only on T3-S3 build)</td></tr>';
+            });
+        }
+        function deleteLog(name) {
+            if (!confirm('Delete ' + name + '?')) return;
+            fetch('/api/logdelete?name=' + encodeURIComponent(name)).then(() => refreshLogs());
+        }
         
         // Initial connection
         term.writeln('\x1b[1;36m╔═══════════════════════════════════════╗\x1b[0m');