Display available space on SDCard

src/network/CrossPointWebServer.cpp

@@ -326,6 +326,8 @@ void CrossPointWebServer::handleStatus() const {
   doc["rssi"] = apMode ? 0 : WiFi.RSSI();
   doc["freeHeap"] = ESP.getFreeHeap();
   doc["uptime"] = millis() / 1000;
+  doc["sdTotal"] = Storage.sdTotalBytes();
+  doc["sdUsed"] = Storage.sdUsedBytes();
 
   String json;
   serializeJson(doc, json);

src/network/html/HomePage.html

@@ -124,6 +124,10 @@
         <span class="label">Free Memory</span>
         <span class="value" id="free-heap"></span>
       </div>
+      <div class="info-row">
+        <span class="label">SD Card</span>
+        <span class="value" id="sd-space"></span>
+      </div>
     </div>
 
     <div class="card">
@@ -132,6 +136,14 @@
       </p>
     </div>
   <script>
+    function formatBytes(bytes) {
+      if (!bytes) return 'N/A';
+      const units = ['B', 'KB', 'MB', 'GB'];
+      let val = bytes, i = 0;
+      while (val >= 1024 && i < units.length - 1) { val /= 1024; i++; }
+      return parseFloat(val.toFixed(2)).toLocaleString() + ' ' + units[i];
+    }
+
     async function fetchStatus() {
       try {
         const response = await fetch('/api/status');
@@ -144,6 +156,9 @@
         document.getElementById('free-heap').textContent = data.freeHeap
           ? data.freeHeap.toLocaleString() + ' bytes'
           : 'N/A';
+        document.getElementById('sd-space').textContent = data.sdTotal
+          ? formatBytes(data.sdUsed) + ' / ' + formatBytes(data.sdTotal)
+          : 'N/A';
       } catch (error) {
         console.error('Error fetching status:', error);
       }