Cut release 0.8.1

Stream CrossPointWebServer data over JSON APIs (#97 )
## Summary * HTML files are now static, streamed directly to the client without modification * For any dynamic values, load via JSON APIs * For files page, we stream the JSON content as we scan the directory to avoid holding onto too much data ## Additional details * We were previously building up a very large string all generated on the X4 directly, we should be leveraging the browser * Fixes https://github.com/daveallie/crosspoint-reader/issues/94
2026-02-04 14:47:37 +03:00 · 2025-12-22 03:20:22 +11:00 · 2025-12-22 03:19:49 +11:00 · 2025-12-22 00:53:55 +11:00 · 2025-12-22 00:48:16 +11:00
18 changed files with 1040 additions and 1043 deletions
--- a/platformio.ini
+++ b/platformio.ini
@ -1,5 +1,5 @@
 [platformio]
-crosspoint_version = 0.8.0
+crosspoint_version = 0.8.1
 default_envs = default

 [base]
@ -9,7 +9,7 @@ framework = arduino
 monitor_speed = 115200
 upload_speed = 921600
 check_tool = cppcheck
-check_flags = --enable=all --suppress=missingIncludeSystem --suppress=unusedFunction --suppress=unmatchedSuppression --inline-suppr
+check_flags = --enable=all --suppress=missingIncludeSystem --suppress=unusedFunction --suppress=unmatchedSuppression --suppress=*:*/.pio/* --inline-suppr
 check_skip_packages = yes

 board_upload.flash_size = 16MB
@ -39,6 +39,7 @@ lib_deps =
  BatteryMonitor=symlink://open-x4-sdk/libs/hardware/BatteryMonitor
  InputManager=symlink://open-x4-sdk/libs/hardware/InputManager
  EInkDisplay=symlink://open-x4-sdk/libs/display/EInkDisplay
+  ArduinoJson @ 7.4.2

 [env:default]
 extends = base
--- a/src/activities/Activity.h
+++ b/src/activities/Activity.h
@ -1,8 +1,11 @@
 #pragma once
-#include <InputManager.h>

+#include <HardwareSerial.h>
+
+#include <string>
 #include <utility>

+class InputManager;
 class GfxRenderer;

 class Activity {
--- a/src/activities/home/HomeActivity.cpp
+++ b/src/activities/home/HomeActivity.cpp
@ -1,6 +1,7 @@
 #include "HomeActivity.h"

 #include <GfxRenderer.h>
+#include <InputManager.h>
 #include <SD.h>

 #include "config.h"
@ -83,8 +84,8 @@ void HomeActivity::displayTaskLoop() {
 void HomeActivity::render() const {
  renderer.clearScreen();

-  const auto pageWidth = GfxRenderer::getScreenWidth();
-  const auto pageHeight = GfxRenderer::getScreenHeight();
+  const auto pageWidth = renderer.getScreenWidth();
+  const auto pageHeight = renderer.getScreenHeight();
  renderer.drawCenteredText(READER_FONT_ID, 10, "CrossPoint Reader", true, BOLD);

  // Draw selection
--- a/src/activities/network/CrossPointWebServerActivity.cpp
+++ b/src/activities/network/CrossPointWebServerActivity.cpp
@ -1,8 +1,10 @@
 #include "CrossPointWebServerActivity.h"

 #include <GfxRenderer.h>
+#include <InputManager.h>
 #include <WiFi.h>

+#include "WifiSelectionActivity.h"
 #include "config.h"

 void CrossPointWebServerActivity::taskTrampoline(void* param) {
--- a/src/activities/network/CrossPointWebServerActivity.h
+++ b/src/activities/network/CrossPointWebServerActivity.h
@ -7,10 +7,8 @@
 #include <memory>
 #include <string>

-#include "../Activity.h"
-#include "WifiSelectionActivity.h"
 #include "activities/ActivityWithSubactivity.h"
-#include "server/CrossPointWebServer.h"
+#include "network/CrossPointWebServer.h"

 // Web server activity states
 enum class WebServerActivityState {
--- a/src/activities/network/WifiSelectionActivity.cpp
+++ b/src/activities/network/WifiSelectionActivity.cpp
@ -6,6 +6,7 @@
 #include <map>

 #include "WifiCredentialStore.h"
+#include "activities/util/KeyboardEntryActivity.h"
 #include "config.h"

 void WifiSelectionActivity::taskTrampoline(void* param) {
@ -18,8 +19,10 @@ void WifiSelectionActivity::onEnter() {

  renderingMutex = xSemaphoreCreateMutex();

-  // Load saved WiFi credentials
+  // Load saved WiFi credentials - SD card operations need lock as we use SPI for both
+  xSemaphoreTake(renderingMutex, portMAX_DELAY);
  WIFI_STORE.loadFromFile();
+  xSemaphoreGive(renderingMutex);

  // Reset state
  selectedNetworkIndex = 0;
@ -32,7 +35,6 @@ void WifiSelectionActivity::onEnter() {
  usedSavedPassword = false;
  savePromptSelection = 0;
  forgetPromptSelection = 0;
-  keyboard.reset();

  // Trigger first update to show scanning message
  updateRequired = true;
@ -98,7 +100,7 @@ void WifiSelectionActivity::startWifiScan() {
 }

 void WifiSelectionActivity::processWifiScanResults() {
-  int16_t scanResult = WiFi.scanComplete();
+  const int16_t scanResult = WiFi.scanComplete();

  if (scanResult == WIFI_SCAN_RUNNING) {
    // Scan still in progress
@ -117,7 +119,7 @@ void WifiSelectionActivity::processWifiScanResults() {

  for (int i = 0; i < scanResult; i++) {
    std::string ssid = WiFi.SSID(i).c_str();
-    int32_t rssi = WiFi.RSSI(i);
+    const int32_t rssi = WiFi.RSSI(i);

    // Skip hidden networks (empty SSID)
    if (ssid.empty()) {
@ -154,7 +156,7 @@ void WifiSelectionActivity::processWifiScanResults() {
  updateRequired = true;
 }

-void WifiSelectionActivity::selectNetwork(int index) {
+void WifiSelectionActivity::selectNetwork(const int index) {
  if (index < 0 || index >= static_cast<int>(networks.size())) {
    return;
  }
@ -180,11 +182,11 @@ void WifiSelectionActivity::selectNetwork(int index) {
  if (selectedRequiresPassword) {
    // Show password entry
    state = WifiSelectionState::PASSWORD_ENTRY;
-    keyboard.reset(new KeyboardEntryActivity(renderer, inputManager, "Enter WiFi Password",
-                                             "",    // No initial text
-                                             64,    // Max password length
-                                             false  // Show password by default (hard keyboard to use)
-                                             ));
+    enterNewActivity(new KeyboardEntryActivity(renderer, inputManager, "Enter WiFi Password",
+                                               "",    // No initial text
+                                               64,    // Max password length
+                                               false  // Show password by default (hard keyboard to use)
+                                               ));
    updateRequired = true;
  } else {
    // Connect directly for open networks
@ -202,8 +204,8 @@ void WifiSelectionActivity::attemptConnection() {
  WiFi.mode(WIFI_STA);

  // Get password from keyboard if we just entered it
-  if (keyboard && !usedSavedPassword) {
-    enteredPassword = keyboard->getText();
+  if (subActivity && !usedSavedPassword) {
+    enteredPassword = static_cast<KeyboardEntryActivity*>(subActivity.get())->getText();
  }

  if (selectedRequiresPassword && !enteredPassword.empty()) {
@ -218,7 +220,7 @@ void WifiSelectionActivity::checkConnectionStatus() {
    return;
  }

-  wl_status_t status = WiFi.status();
+  const wl_status_t status = WiFi.status();

  if (status == WL_CONNECTED) {
    // Successfully connected
@ -275,7 +277,8 @@ void WifiSelectionActivity::loop() {
  }

  // Handle password entry state
-  if (state == WifiSelectionState::PASSWORD_ENTRY && keyboard) {
+  if (state == WifiSelectionState::PASSWORD_ENTRY && subActivity) {
+    const auto keyboard = static_cast<KeyboardEntryActivity*>(subActivity.get());
    keyboard->handleInput();

    if (keyboard->isComplete()) {
@ -285,7 +288,7 @@ void WifiSelectionActivity::loop() {

    if (keyboard->isCancelled()) {
      state = WifiSelectionState::NETWORK_LIST;
-      keyboard.reset();
+      exitActivity();
      updateRequired = true;
      return;
    }
@ -309,7 +312,9 @@ void WifiSelectionActivity::loop() {
    } else if (inputManager.wasPressed(InputManager::BTN_CONFIRM)) {
      if (savePromptSelection == 0) {
        // User chose "Yes" - save the password
+        xSemaphoreTake(renderingMutex, portMAX_DELAY);
        WIFI_STORE.addCredential(selectedSSID, enteredPassword);
+        xSemaphoreGive(renderingMutex);
      }
      // Complete - parent will start web server
      onComplete(true);
@ -335,7 +340,9 @@ void WifiSelectionActivity::loop() {
    } else if (inputManager.wasPressed(InputManager::BTN_CONFIRM)) {
      if (forgetPromptSelection == 0) {
        // User chose "Yes" - forget the network
+        xSemaphoreTake(renderingMutex, portMAX_DELAY);
        WIFI_STORE.removeCredential(selectedSSID);
+        xSemaphoreGive(renderingMutex);
        // Update the network list to reflect the change
        const auto network = find_if(networks.begin(), networks.end(),
                                     [this](const WifiNetworkInfo& net) { return net.ssid == selectedSSID; });
@ -410,15 +417,18 @@ void WifiSelectionActivity::loop() {
  }
 }

-std::string WifiSelectionActivity::getSignalStrengthIndicator(int32_t rssi) const {
+std::string WifiSelectionActivity::getSignalStrengthIndicator(const int32_t rssi) const {
  // Convert RSSI to signal bars representation
  if (rssi >= -50) {
    return "||||";  // Excellent
-  } else if (rssi >= -60) {
+  }
+  if (rssi >= -60) {
    return "||| ";  // Good
-  } else if (rssi >= -70) {
+  }
+  if (rssi >= -70) {
    return "||  ";  // Fair
-  } else if (rssi >= -80) {
+  }
+  if (rssi >= -80) {
    return "|   ";  // Weak
  }
  return "    ";  // Very weak
@ -484,8 +494,8 @@ void WifiSelectionActivity::renderNetworkList() const {
    renderer.drawCenteredText(SMALL_FONT_ID, top + height + 10, "Press OK to scan again", true, REGULAR);
  } else {
    // Calculate how many networks we can display
-    const int startY = 60;
-    const int lineHeight = 25;
+    constexpr int startY = 60;
+    constexpr int lineHeight = 25;
    const int maxVisibleNetworks = (pageHeight - startY - 40) / lineHeight;

    // Calculate scroll offset to keep selected item visible
@ -557,8 +567,8 @@ void WifiSelectionActivity::renderPasswordEntry() const {
  renderer.drawCenteredText(UI_FONT_ID, 38, networkInfo.c_str(), true, REGULAR);

  // Draw keyboard
-  if (keyboard) {
-    keyboard->render(58);
+  if (subActivity) {
+    static_cast<KeyboardEntryActivity*>(subActivity.get())->render(58);
  }
 }

@ -593,7 +603,7 @@ void WifiSelectionActivity::renderConnected() const {
  }
  renderer.drawCenteredText(UI_FONT_ID, top + 10, ssidInfo.c_str(), true, REGULAR);

-  std::string ipInfo = "IP Address: " + connectedIP;
+  const std::string ipInfo = "IP Address: " + connectedIP;
  renderer.drawCenteredText(UI_FONT_ID, top + 40, ipInfo.c_str(), true, REGULAR);

  renderer.drawCenteredText(SMALL_FONT_ID, pageHeight - 30, "Press any button to continue", true, REGULAR);
@ -617,9 +627,9 @@ void WifiSelectionActivity::renderSavePrompt() const {

  // Draw Yes/No buttons
  const int buttonY = top + 80;
-  const int buttonWidth = 60;
-  const int buttonSpacing = 30;
-  const int totalWidth = buttonWidth * 2 + buttonSpacing;
+  constexpr int buttonWidth = 60;
+  constexpr int buttonSpacing = 30;
+  constexpr int totalWidth = buttonWidth * 2 + buttonSpacing;
  const int startX = (pageWidth - totalWidth) / 2;

  // Draw "Yes" button
@ -667,9 +677,9 @@ void WifiSelectionActivity::renderForgetPrompt() const {

  // Draw Yes/No buttons
  const int buttonY = top + 80;
-  const int buttonWidth = 60;
-  const int buttonSpacing = 30;
-  const int totalWidth = buttonWidth * 2 + buttonSpacing;
+  constexpr int buttonWidth = 60;
+  constexpr int buttonSpacing = 30;
+  constexpr int totalWidth = buttonWidth * 2 + buttonSpacing;
  const int startX = (pageWidth - totalWidth) / 2;

  // Draw "Yes" button
--- a/src/activities/network/WifiSelectionActivity.h
+++ b/src/activities/network/WifiSelectionActivity.h
@ -9,8 +9,7 @@
 #include <string>
 #include <vector>

-#include "../Activity.h"
-#include "../util/KeyboardEntryActivity.h"
+#include "activities/ActivityWithSubactivity.h"

 // Structure to hold WiFi network information
 struct WifiNetworkInfo {
@ -43,7 +42,7 @@ enum class WifiSelectionState {
 *
 * The onComplete callback receives true if connected successfully, false if cancelled.
 */
-class WifiSelectionActivity final : public Activity {
+class WifiSelectionActivity final : public ActivityWithSubactivity {
  TaskHandle_t displayTaskHandle = nullptr;
  SemaphoreHandle_t renderingMutex = nullptr;
  bool updateRequired = false;
@ -56,9 +55,6 @@ class WifiSelectionActivity final : public Activity {
  std::string selectedSSID;
  bool selectedRequiresPassword = false;

-  // On-screen keyboard for password entry
-  std::unique_ptr<KeyboardEntryActivity> keyboard;
-
  // Connection result
  std::string connectedIP;
  std::string connectionError;
@ -98,7 +94,7 @@ class WifiSelectionActivity final : public Activity {
 public:
  explicit WifiSelectionActivity(GfxRenderer& renderer, InputManager& inputManager,
                                 const std::function<void(bool connected)>& onComplete)
-      : Activity("WifiSelection", renderer, inputManager), onComplete(onComplete) {}
+      : ActivityWithSubactivity("WifiSelection", renderer, inputManager), onComplete(onComplete) {}
  void onEnter() override;
  void onExit() override;
  void loop() override;
--- a/src/activities/reader/EpubReaderActivity.cpp
+++ b/src/activities/reader/EpubReaderActivity.cpp
@ -2,6 +2,7 @@

 #include <Epub/Page.h>
 #include <GfxRenderer.h>
+#include <InputManager.h>
 #include <SD.h>

 #include "Battery.h"
--- a/src/activities/reader/EpubReaderChapterSelectionActivity.cpp
+++ b/src/activities/reader/EpubReaderChapterSelectionActivity.cpp
@ -1,6 +1,7 @@
 #include "EpubReaderChapterSelectionActivity.h"

 #include <GfxRenderer.h>
+#include <InputManager.h>
 #include <SD.h>

 #include "config.h"
--- a/src/activities/reader/FileSelectionActivity.cpp
+++ b/src/activities/reader/FileSelectionActivity.cpp
@ -1,6 +1,7 @@
 #include "FileSelectionActivity.h"

 #include <GfxRenderer.h>
+#include <InputManager.h>
 #include <SD.h>

 #include "config.h"
--- a/src/activities/settings/SettingsActivity.cpp
+++ b/src/activities/settings/SettingsActivity.cpp
@ -1,6 +1,7 @@
 #include "SettingsActivity.h"

 #include <GfxRenderer.h>
+#include <InputManager.h>

 #include "CrossPointSettings.h"
 #include "config.h"
--- a/src/html/FilesPageFooter.html
+++ b/src/html/FilesPageFooter.html
@ -1,233 +0,0 @@
-   <div class="card">
-    <p style="text-align: center; color: #95a5a6; margin: 0;">
-      CrossPoint E-Reader • Open Source
-    </p>
-  </div>
-
-  <!-- Upload Modal -->
-  <div class="modal-overlay" id="uploadModal">
-    <div class="modal">
-      <button class="modal-close" onclick="closeUploadModal()">&times;</button>
-      <h3>📤 Upload file</h3>
-      <div class="upload-form">
-        <p class="file-info">Select a file to upload to <strong id="uploadPathDisplay"></strong></p>
-        <input type="file" id="fileInput" onchange="validateFile()">
-        <button id="uploadBtn" class="upload-btn" onclick="uploadFile()" disabled>Upload</button>
-        <div id="progress-container">
-          <div id="progress-bar"><div id="progress-fill"></div></div>
-          <div id="progress-text"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- New Folder Modal -->
-  <div class="modal-overlay" id="folderModal">
-    <div class="modal">
-      <button class="modal-close" onclick="closeFolderModal()">&times;</button>
-      <h3>📁 New Folder</h3>
-      <div class="folder-form">
-        <p class="file-info">Create a new folder in <strong id="folderPathDisplay"></strong></p>
-        <input type="text" id="folderName" class="folder-input" placeholder="Folder name...">
-        <button class="folder-btn" onclick="createFolder()">Create Folder</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Delete Confirmation Modal -->
-  <div class="modal-overlay" id="deleteModal">
-    <div class="modal">
-      <button class="modal-close" onclick="closeDeleteModal()">&times;</button>
-      <h3>🗑️ Delete Item</h3>
-      <div class="folder-form">
-        <p class="delete-warning">⚠️ This action cannot be undone!</p>
-        <p class="file-info">Are you sure you want to delete:</p>
-        <p class="delete-item-name" id="deleteItemName"></p>
-        <input type="hidden" id="deleteItemPath">
-        <input type="hidden" id="deleteItemType">
-        <button class="delete-btn-confirm" onclick="confirmDelete()">Delete</button>
-        <button class="delete-btn-cancel" onclick="closeDeleteModal()">Cancel</button>
-      </div>
-    </div>
-  </div>
-
-  <script>
-    // Modal functions
-    function openUploadModal() {
-      const currentPath = document.getElementById('currentPath').value;
-      document.getElementById('uploadPathDisplay').textContent = currentPath === '/' ? '/ 🏠' : currentPath;
-      document.getElementById('uploadModal').classList.add('open');
-    }
-
-    function closeUploadModal() {
-      document.getElementById('uploadModal').classList.remove('open');
-      document.getElementById('fileInput').value = '';
-      document.getElementById('uploadBtn').disabled = true;
-      document.getElementById('progress-container').style.display = 'none';
-      document.getElementById('progress-fill').style.width = '0%';
-      document.getElementById('progress-fill').style.backgroundColor = '#27ae60';
-    }
-
-    function openFolderModal() {
-      const currentPath = document.getElementById('currentPath').value;
-      document.getElementById('folderPathDisplay').textContent = currentPath === '/' ? '/ 🏠' : currentPath;
-      document.getElementById('folderModal').classList.add('open');
-      document.getElementById('folderName').value = '';
-    }
-
-    function closeFolderModal() {
-      document.getElementById('folderModal').classList.remove('open');
-    }
-
-    // Close modals when clicking overlay
-    document.querySelectorAll('.modal-overlay').forEach(function(overlay) {
-      overlay.addEventListener('click', function(e) {
-        if (e.target === overlay) {
-          overlay.classList.remove('open');
-        }
-      });
-    });
-
-    function validateFile() {
-      const fileInput = document.getElementById('fileInput');
-      const uploadBtn = document.getElementById('uploadBtn');
-      const file = fileInput.files[0];
-      uploadBtn.disabled = !file;
-    }
-
-    function uploadFile() {
-      const fileInput = document.getElementById('fileInput');
-      const file = fileInput.files[0];
-      const currentPath = document.getElementById('currentPath').value;
-
-      if (!file) {
-        alert('Please select a file first!');
-        return;
-      }
-
-      const formData = new FormData();
-      formData.append('file', file);
-
-      const progressContainer = document.getElementById('progress-container');
-      const progressFill = document.getElementById('progress-fill');
-      const progressText = document.getElementById('progress-text');
-      const uploadBtn = document.getElementById('uploadBtn');
-
-      progressContainer.style.display = 'block';
-      uploadBtn.disabled = true;
-
-      const xhr = new XMLHttpRequest();
-      // Include path as query parameter since multipart form data doesn't make
-      // form fields available until after file upload completes
-      xhr.open('POST', '/upload?path=' + encodeURIComponent(currentPath), true);
-
-      xhr.upload.onprogress = function(e) {
-        if (e.lengthComputable) {
-          const percent = Math.round((e.loaded / e.total) * 100);
-          progressFill.style.width = percent + '%';
-          progressText.textContent = 'Uploading: ' + percent + '%';
-        }
-      };
-
-      xhr.onload = function() {
-        if (xhr.status === 200) {
-          progressText.textContent = 'Upload complete!';
-          setTimeout(function() {
-            window.location.reload();
-          }, 1000);
-        } else {
-          progressText.textContent = 'Upload failed: ' + xhr.responseText;
-          progressFill.style.backgroundColor = '#e74c3c';
-          uploadBtn.disabled = false;
-        }
-      };
-
-      xhr.onerror = function() {
-        progressText.textContent = 'Upload failed - network error';
-        progressFill.style.backgroundColor = '#e74c3c';
-        uploadBtn.disabled = false;
-      };
-
-      xhr.send(formData);
-    }
-
-    function createFolder() {
-      const folderName = document.getElementById('folderName').value.trim();
-      const currentPath = document.getElementById('currentPath').value;
-
-      if (!folderName) {
-        alert('Please enter a folder name!');
-        return;
-      }
-
-      // Validate folder name (no special characters except underscore and hyphen)
-      const validName = /^[a-zA-Z0-9_\-]+$/.test(folderName);
-      if (!validName) {
-        alert('Folder name can only contain letters, numbers, underscores, and hyphens.');
-        return;
-      }
-
-      const formData = new FormData();
-      formData.append('name', folderName);
-      formData.append('path', currentPath);
-
-      const xhr = new XMLHttpRequest();
-      xhr.open('POST', '/mkdir', true);
-
-      xhr.onload = function() {
-        if (xhr.status === 200) {
-          window.location.reload();
-        } else {
-          alert('Failed to create folder: ' + xhr.responseText);
-        }
-      };
-
-      xhr.onerror = function() {
-        alert('Failed to create folder - network error');
-      };
-
-      xhr.send(formData);
-    }
-
-    // Delete functions
-    function openDeleteModal(name, path, isFolder) {
-      document.getElementById('deleteItemName').textContent = (isFolder ? '📁 ' : '📄 ') + name;
-      document.getElementById('deleteItemPath').value = path;
-      document.getElementById('deleteItemType').value = isFolder ? 'folder' : 'file';
-      document.getElementById('deleteModal').classList.add('open');
-    }
-
-    function closeDeleteModal() {
-      document.getElementById('deleteModal').classList.remove('open');
-    }
-
-    function confirmDelete() {
-      const path = document.getElementById('deleteItemPath').value;
-      const itemType = document.getElementById('deleteItemType').value;
-
-      const formData = new FormData();
-      formData.append('path', path);
-      formData.append('type', itemType);
-
-      const xhr = new XMLHttpRequest();
-      xhr.open('POST', '/delete', true);
-
-      xhr.onload = function() {
-        if (xhr.status === 200) {
-          window.location.reload();
-        } else {
-          alert('Failed to delete: ' + xhr.responseText);
-          closeDeleteModal();
-        }
-      };
-
-      xhr.onerror = function() {
-        alert('Failed to delete - network error');
-        closeDeleteModal();
-      };
-
-      xhr.send(formData);
-    }
-  </script>
-</body>
-</html>
--- a/src/html/FilesPageHeader.html
+++ b/src/html/FilesPageHeader.html
@ -1,472 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>CrossPoint Reader - Files</title>
-    <style>
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-          Oxygen, Ubuntu, sans-serif;
-        max-width: 800px;
-        margin: 0 auto;
-        padding: 20px;
-        background-color: #f5f5f5;
-        color: #333;
-      }
-      h1 {
-        color: #2c3e50;
-        margin-bottom: 5px;
-      }
-      h2 {
-        color: #34495e;
-        margin-top: 0;
-      }
-      .card {
-        background: white;
-        border-radius: 8px;
-        padding: 20px;
-        margin: 15px 0;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-      .page-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 15px;
-        margin-bottom: 20px;
-        padding-bottom: 15px;
-        border-bottom: 2px solid #3498db;
-      }
-      .page-header-left {
-        display: flex;
-        align-items: baseline;
-        gap: 12px;
-        flex-wrap: wrap;
-      }
-      .breadcrumb-inline {
-        color: #7f8c8d;
-        font-size: 1.1em;
-      }
-      .breadcrumb-inline a {
-        color: #3498db;
-        text-decoration: none;
-      }
-      .breadcrumb-inline a:hover {
-        text-decoration: underline;
-      }
-      .breadcrumb-inline .sep {
-        margin: 0 6px;
-        color: #bdc3c7;
-      }
-      .breadcrumb-inline .current {
-        color: #2c3e50;
-        font-weight: 500;
-      }
-      .nav-links {
-        margin: 20px 0;
-      }
-      .nav-links a {
-        display: inline-block;
-        padding: 10px 20px;
-        background-color: #3498db;
-        color: white;
-        text-decoration: none;
-        border-radius: 4px;
-        margin-right: 10px;
-      }
-      .nav-links a:hover {
-        background-color: #2980b9;
-      }
-      /* Action buttons */
-      .action-buttons {
-        display: flex;
-        gap: 10px;
-      }
-      .action-btn {
-        color: white;
-        padding: 10px 16px;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 0.95em;
-        font-weight: 600;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-      }
-      .upload-action-btn {
-        background-color: #27ae60;
-      }
-      .upload-action-btn:hover {
-        background-color: #219a52;
-      }
-      .folder-action-btn {
-        background-color: #f39c12;
-      }
-      .folder-action-btn:hover {
-        background-color: #d68910;
-      }
-      /* Upload modal */
-      .modal-overlay {
-        display: none;
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.5);
-        z-index: 200;
-        justify-content: center;
-        align-items: center;
-      }
-      .modal-overlay.open {
-        display: flex;
-      }
-      .modal {
-        background: white;
-        border-radius: 8px;
-        padding: 25px;
-        max-width: 450px;
-        width: 90%;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-      }
-      .modal h3 {
-        margin: 0 0 15px 0;
-        color: #2c3e50;
-      }
-      .modal-close {
-        float: right;
-        background: none;
-        border: none;
-        font-size: 1.5em;
-        cursor: pointer;
-        color: #7f8c8d;
-        line-height: 1;
-      }
-      .modal-close:hover {
-        color: #2c3e50;
-      }
-      .file-table {
-        width: 100%;
-        border-collapse: collapse;
-      }
-      .file-table th,
-      .file-table td {
-        padding: 12px;
-        text-align: left;
-        border-bottom: 1px solid #eee;
-      }
-      .file-table th {
-        background-color: #f8f9fa;
-        font-weight: 600;
-        color: #7f8c8d;
-      }
-      .file-table tr:hover {
-        background-color: #f8f9fa;
-      }
-      .epub-file {
-        background-color: #e8f6e9 !important;
-      }
-      .epub-file:hover {
-        background-color: #d4edda !important;
-      }
-      .folder-row {
-        background-color: #fff9e6 !important;
-      }
-      .folder-row:hover {
-        background-color: #fff3cd !important;
-      }
-      .epub-badge {
-        display: inline-block;
-        padding: 2px 8px;
-        background-color: #27ae60;
-        color: white;
-        border-radius: 10px;
-        font-size: 0.75em;
-        margin-left: 8px;
-      }
-      .folder-badge {
-        display: inline-block;
-        padding: 2px 8px;
-        background-color: #f39c12;
-        color: white;
-        border-radius: 10px;
-        font-size: 0.75em;
-        margin-left: 8px;
-      }
-      .file-icon {
-        margin-right: 8px;
-      }
-      .folder-link {
-        color: #2c3e50;
-        text-decoration: none;
-        cursor: pointer;
-      }
-      .folder-link:hover {
-        color: #3498db;
-        text-decoration: underline;
-      }
-      .upload-form {
-        margin-top: 10px;
-      }
-      .upload-form input[type="file"] {
-        margin: 10px 0;
-        width: 100%;
-      }
-      .upload-btn {
-        background-color: #27ae60;
-        color: white;
-        padding: 10px 20px;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 1em;
-        width: 100%;
-      }
-      .upload-btn:hover {
-        background-color: #219a52;
-      }
-      .upload-btn:disabled {
-        background-color: #95a5a6;
-        cursor: not-allowed;
-      }
-      .file-info {
-        color: #7f8c8d;
-        font-size: 0.85em;
-        margin: 8px 0;
-      }
-      .no-files {
-        text-align: center;
-        color: #95a5a6;
-        padding: 40px;
-        font-style: italic;
-      }
-      .message {
-        padding: 15px;
-        border-radius: 4px;
-        margin: 15px 0;
-      }
-      .message.success {
-        background-color: #d4edda;
-        color: #155724;
-        border: 1px solid #c3e6cb;
-      }
-      .message.error {
-        background-color: #f8d7da;
-        color: #721c24;
-        border: 1px solid #f5c6cb;
-      }
-      .contents-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 12px;
-      }
-      .contents-title {
-        font-size: 1.1em;
-        font-weight: 600;
-        color: #34495e;
-        margin: 0;
-      }
-      .summary-inline {
-        color: #7f8c8d;
-        font-size: 0.9em;
-      }
-      #progress-container {
-        display: none;
-        margin-top: 10px;
-      }
-      #progress-bar {
-        width: 100%;
-        height: 20px;
-        background-color: #e0e0e0;
-        border-radius: 10px;
-        overflow: hidden;
-      }
-      #progress-fill {
-        height: 100%;
-        background-color: #27ae60;
-        width: 0%;
-        transition: width 0.3s;
-      }
-      #progress-text {
-        text-align: center;
-        margin-top: 5px;
-        font-size: 0.9em;
-        color: #7f8c8d;
-      }
-      .folder-form {
-        margin-top: 10px;
-      }
-      .folder-input {
-        width: 100%;
-        padding: 10px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        font-size: 1em;
-        margin-bottom: 10px;
-        box-sizing: border-box;
-      }
-      .folder-btn {
-        background-color: #f39c12;
-        color: white;
-        padding: 10px 20px;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 1em;
-        width: 100%;
-      }
-      .folder-btn:hover {
-        background-color: #d68910;
-      }
-      /* Delete button styles */
-      .delete-btn {
-        background: none;
-        border: none;
-        cursor: pointer;
-        font-size: 1.1em;
-        padding: 4px 8px;
-        border-radius: 4px;
-        color: #95a5a6;
-        transition: all 0.15s;
-      }
-      .delete-btn:hover {
-        background-color: #fee;
-        color: #e74c3c;
-      }
-      .actions-col {
-        width: 60px;
-        text-align: center;
-      }
-      /* Delete modal */
-      .delete-warning {
-        color: #e74c3c;
-        font-weight: 600;
-        margin: 10px 0;
-      }
-      .delete-item-name {
-        font-weight: 600;
-        color: #2c3e50;
-        word-break: break-all;
-      }
-      .delete-btn-confirm {
-        background-color: #e74c3c;
-        color: white;
-        padding: 10px 20px;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 1em;
-        width: 100%;
-      }
-      .delete-btn-confirm:hover {
-        background-color: #c0392b;
-      }
-      .delete-btn-cancel {
-        background-color: #95a5a6;
-        color: white;
-        padding: 10px 20px;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 1em;
-        width: 100%;
-        margin-top: 10px;
-      }
-      .delete-btn-cancel:hover {
-        background-color: #7f8c8d;
-      }
-      /* Mobile responsive styles */
-      @media (max-width: 600px) {
-        body {
-          padding: 10px;
-          font-size: 14px;
-        }
-        .card {
-          padding: 12px;
-          margin: 10px 0;
-        }
-        .page-header {
-          gap: 10px;
-          margin-bottom: 12px;
-          padding-bottom: 10px;
-        }
-        .page-header-left {
-          gap: 8px;
-        }
-        h1 {
-          font-size: 1.3em;
-        }
-        .breadcrumb-inline {
-          font-size: 0.95em;
-        }
-        .nav-links a {
-          padding: 8px 12px;
-          margin-right: 6px;
-          font-size: 0.9em;
-        }
-        .action-buttons {
-          gap: 6px;
-        }
-        .action-btn {
-          padding: 8px 10px;
-          font-size: 0.85em;
-        }
-        .file-table th,
-        .file-table td {
-          padding: 8px 6px;
-          font-size: 0.9em;
-        }
-        .file-table th {
-          font-size: 0.85em;
-        }
-        .file-icon {
-          margin-right: 4px;
-        }
-        .epub-badge,
-        .folder-badge {
-          padding: 2px 5px;
-          font-size: 0.65em;
-          margin-left: 4px;
-        }
-        .contents-header {
-          margin-bottom: 8px;
-          flex-wrap: wrap;
-          gap: 4px;
-        }
-        .contents-title {
-          font-size: 1em;
-        }
-        .summary-inline {
-          font-size: 0.8em;
-        }
-        .modal {
-          padding: 15px;
-        }
-        .modal h3 {
-          font-size: 1.1em;
-        }
-        .actions-col {
-          width: 40px;
-        }
-        .delete-btn {
-          font-size: 1em;
-          padding: 2px 4px;
-        }
-        .no-files {
-          padding: 20px;
-          font-size: 0.9em;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <div class="nav-links">
-      <a href="/">Home</a>
-      <a href="/files">File Manager</a>
-    </div>
-  </body>
-</html>
--- a/src/main.cpp
+++ b/src/main.cpp
@ -60,6 +60,9 @@ EpdFontFamily ubuntuFontFamily(&ubuntu10Font, &ubuntuBold10Font);

 // Auto-sleep timeout (10 minutes of inactivity)
 constexpr unsigned long AUTO_SLEEP_TIMEOUT_MS = 10 * 60 * 1000;
+// measurement of power button press duration calibration value
+unsigned long t1 = 0;
+unsigned long t2 = 0;

 void exitActivity() {
  if (currentActivity) {
@ -79,6 +82,10 @@ void verifyWakeupLongPress() {
  // Give the user up to 1000ms to start holding the power button, and must hold for SETTINGS.getPowerButtonDuration()
  const auto start = millis();
  bool abort = false;
+  // It takes us some time to wake up from deep sleep, so we need to subtract that from the duration
+  uint16_t calibration = 25;
+  uint16_t calibratedPressDuration =
+      (calibration < SETTINGS.getPowerButtonDuration()) ? SETTINGS.getPowerButtonDuration() - calibration : 1;

  inputManager.update();
  // Verify the user has actually pressed
@ -87,13 +94,13 @@ void verifyWakeupLongPress() {
    inputManager.update();
  }

+  t2 = millis();
  if (inputManager.isPressed(InputManager::BTN_POWER)) {
    do {
      delay(10);
      inputManager.update();
-    } while (inputManager.isPressed(InputManager::BTN_POWER) &&
-             inputManager.getHeldTime() < SETTINGS.getPowerButtonDuration());
-    abort = inputManager.getHeldTime() < SETTINGS.getPowerButtonDuration();
+    } while (inputManager.isPressed(InputManager::BTN_POWER) && inputManager.getHeldTime() < calibratedPressDuration);
+    abort = inputManager.getHeldTime() < calibratedPressDuration;
  } else {
    abort = true;
  }
@ -120,7 +127,7 @@ void enterDeepSleep() {
  enterNewActivity(new SleepActivity(renderer, inputManager));

  einkDisplay.deepSleep();
-
+  Serial.printf("[%lu] [   ] Power button press calibration value: %lu ms\n", millis(), t2 - t1);
  Serial.printf("[%lu] [   ] Entering deep sleep.\n", millis());
  esp_deep_sleep_enable_gpio_wakeup(1ULL << InputManager::POWER_BUTTON_PIN, ESP_GPIO_WAKEUP_GPIO_LOW);
  // Ensure that the power button has been released to avoid immediately turning back on if you're holding it
@ -152,6 +159,7 @@ void onGoHome() {
 }

 void setup() {
+  t1 = millis();
  Serial.begin(115200);

  Serial.printf("[%lu] [   ] Starting CrossPoint version " CROSSPOINT_VERSION "\n", millis());
--- a/src/activities/network/server/CrossPointWebServer.cpp
+++ b/src/activities/network/server/CrossPointWebServer.cpp
@ -1,53 +1,19 @@
 #include "CrossPointWebServer.h"

+#include <ArduinoJson.h>
 #include <SD.h>
 #include <WiFi.h>

 #include <algorithm>

-#include "config.h"
-#include "html/FilesPageFooterHtml.generated.h"
-#include "html/FilesPageHeaderHtml.generated.h"
+#include "html/FilesPageHtml.generated.h"
 #include "html/HomePageHtml.generated.h"

 namespace {
-
 // Folders/files to hide from the web interface file browser
 // Note: Items starting with "." are automatically hidden
 const char* HIDDEN_ITEMS[] = {"System Volume Information", "XTCache"};
-const size_t HIDDEN_ITEMS_COUNT = sizeof(HIDDEN_ITEMS) / sizeof(HIDDEN_ITEMS[0]);
-
-// Helper function to escape HTML special characters to prevent XSS
-String escapeHtml(const String& input) {
-  String output;
-  output.reserve(input.length() * 1.1);  // Pre-allocate with some extra space
-
-  for (size_t i = 0; i < input.length(); i++) {
-    char c = input.charAt(i);
-    switch (c) {
-      case '&':
-        output += "&amp;";
-        break;
-      case '<':
-        output += "&lt;";
-        break;
-      case '>':
-        output += "&gt;";
-        break;
-      case '"':
-        output += "&quot;";
-        break;
-      case '\'':
-        output += "&#39;";
-        break;
-      default:
-        output += c;
-        break;
-    }
-  }
-  return output;
-}
-
+constexpr size_t HIDDEN_ITEMS_COUNT = sizeof(HIDDEN_ITEMS) / sizeof(HIDDEN_ITEMS[0]);
 }  // namespace

 // File listing page template - now using generated headers:
@ -72,7 +38,7 @@ void CrossPointWebServer::begin() {
  Serial.printf("[%lu] [WEB] [MEM] Free heap before begin: %d bytes\n", millis(), ESP.getFreeHeap());

  Serial.printf("[%lu] [WEB] Creating web server on port %d...\n", millis(), port);
-  server = new WebServer(port);
+  server.reset(new WebServer(port));
  Serial.printf("[%lu] [WEB] [MEM] Free heap after WebServer allocation: %d bytes\n", millis(), ESP.getFreeHeap());

  if (!server) {
@ -82,20 +48,22 @@ void CrossPointWebServer::begin() {

  // Setup routes
  Serial.printf("[%lu] [WEB] Setting up routes...\n", millis());
-  server->on("/", HTTP_GET, [this]() { handleRoot(); });
-  server->on("/status", HTTP_GET, [this]() { handleStatus(); });
-  server->on("/files", HTTP_GET, [this]() { handleFileList(); });
+  server->on("/", HTTP_GET, [this] { handleRoot(); });
+  server->on("/files", HTTP_GET, [this] { handleFileList(); });
+
+  server->on("/api/status", HTTP_GET, [this] { handleStatus(); });
+  server->on("/api/files", HTTP_GET, [this] { handleFileListData(); });

  // Upload endpoint with special handling for multipart form data
-  server->on("/upload", HTTP_POST, [this]() { handleUploadPost(); }, [this]() { handleUpload(); });
+  server->on("/upload", HTTP_POST, [this] { handleUploadPost(); }, [this] { handleUpload(); });

  // Create folder endpoint
-  server->on("/mkdir", HTTP_POST, [this]() { handleCreateFolder(); });
+  server->on("/mkdir", HTTP_POST, [this] { handleCreateFolder(); });

  // Delete file/folder endpoint
-  server->on("/delete", HTTP_POST, [this]() { handleDelete(); });
+  server->on("/delete", HTTP_POST, [this] { handleDelete(); });

-  server->onNotFound([this]() { handleNotFound(); });
+  server->onNotFound([this] { handleNotFound(); });
  Serial.printf("[%lu] [WEB] [MEM] Free heap after route setup: %d bytes\n", millis(), ESP.getFreeHeap());

  server->begin();
@ -108,7 +76,8 @@ void CrossPointWebServer::begin() {

 void CrossPointWebServer::stop() {
  if (!running || !server) {
-    Serial.printf("[%lu] [WEB] stop() called but already stopped (running=%d, server=%p)\n", millis(), running, server);
+    Serial.printf("[%lu] [WEB] stop() called but already stopped (running=%d, server=%p)\n", millis(), running,
+                  server.get());
    return;
  }

@ -128,9 +97,7 @@ void CrossPointWebServer::stop() {
  delay(50);
  Serial.printf("[%lu] [WEB] Waited 50ms before deleting server\n", millis());

-  delete server;
-  server = nullptr;
-
+  server.reset();
  Serial.printf("[%lu] [WEB] Web server stopped and deleted\n", millis());
  Serial.printf("[%lu] [WEB] [MEM] Free heap after delete server: %d bytes\n", millis(), ESP.getFreeHeap());

@ -139,7 +106,7 @@ void CrossPointWebServer::stop() {
  Serial.printf("[%lu] [WEB] [MEM] Free heap final: %d bytes\n", millis(), ESP.getFreeHeap());
 }

-void CrossPointWebServer::handleClient() {
+void CrossPointWebServer::handleClient() const {
  static unsigned long lastDebugPrint = 0;

  // Check running flag FIRST before accessing server
@ -162,25 +129,18 @@ void CrossPointWebServer::handleClient() {
  server->handleClient();
 }

-void CrossPointWebServer::handleRoot() {
-  String html = HomePageHtml;
-
-  // Replace placeholders with actual values
-  html.replace("%VERSION%", CROSSPOINT_VERSION);
-  html.replace("%IP_ADDRESS%", WiFi.localIP().toString());
-  html.replace("%FREE_HEAP%", String(ESP.getFreeHeap()));
-
-  server->send(200, "text/html", html);
+void CrossPointWebServer::handleRoot() const {
+  server->send(200, "text/html", HomePageHtml);
  Serial.printf("[%lu] [WEB] Served root page\n", millis());
 }

-void CrossPointWebServer::handleNotFound() {
+void CrossPointWebServer::handleNotFound() const {
  String message = "404 Not Found\n\n";
  message += "URI: " + server->uri() + "\n";
  server->send(404, "text/plain", message);
 }

-void CrossPointWebServer::handleStatus() {
+void CrossPointWebServer::handleStatus() const {
  String json = "{";
  json += "\"version\":\"" + String(CROSSPOINT_VERSION) + "\",";
  json += "\"ip\":\"" + WiFi.localIP().toString() + "\",";
@ -192,26 +152,24 @@ void CrossPointWebServer::handleStatus() {
  server->send(200, "application/json", json);
 }

-std::vector<FileInfo> CrossPointWebServer::scanFiles(const char* path) {
-  std::vector<FileInfo> files;
-
+void CrossPointWebServer::scanFiles(const char* path, const std::function<void(FileInfo)>& callback) const {
  File root = SD.open(path);
  if (!root) {
    Serial.printf("[%lu] [WEB] Failed to open directory: %s\n", millis(), path);
-    return files;
+    return;
  }

  if (!root.isDirectory()) {
    Serial.printf("[%lu] [WEB] Not a directory: %s\n", millis(), path);
    root.close();
-    return files;
+    return;
  }

  Serial.printf("[%lu] [WEB] Scanning files in: %s\n", millis(), path);

  File file = root.openNextFile();
  while (file) {
-    String fileName = String(file.name());
+    auto fileName = String(file.name());

    // Skip hidden items (starting with ".")
    bool shouldHide = fileName.startsWith(".");
@ -239,37 +197,24 @@ std::vector<FileInfo> CrossPointWebServer::scanFiles(const char* path) {
        info.isEpub = isEpubFile(info.name);
      }

-      files.push_back(info);
+      callback(info);
    }

    file.close();
    file = root.openNextFile();
  }
  root.close();
-
-  Serial.printf("[%lu] [WEB] Found %d items (files and folders)\n", millis(), files.size());
-  return files;
 }

-String CrossPointWebServer::formatFileSize(size_t bytes) {
-  if (bytes < 1024) {
-    return String(bytes) + " B";
-  } else if (bytes < 1024 * 1024) {
-    return String(bytes / 1024.0, 1) + " KB";
-  } else {
-    return String(bytes / (1024.0 * 1024.0), 1) + " MB";
-  }
-}
-
-bool CrossPointWebServer::isEpubFile(const String& filename) {
+bool CrossPointWebServer::isEpubFile(const String& filename) const {
  String lower = filename;
  lower.toLowerCase();
  return lower.endsWith(".epub");
 }

-void CrossPointWebServer::handleFileList() {
-  String html = FilesPageHeaderHtml;
+void CrossPointWebServer::handleFileList() const { server->send(200, "text/html", FilesPageHtml); }

+void CrossPointWebServer::handleFileListData() const {
  // Get current path from query string (default to root)
  String currentPath = "/";
  if (server->hasArg("path")) {
@ -284,180 +229,35 @@ void CrossPointWebServer::handleFileList() {
    }
  }

-  // Get message from query string if present
-  if (server->hasArg("msg")) {
-    String msg = escapeHtml(server->arg("msg"));
-    String msgType = server->hasArg("type") ? escapeHtml(server->arg("type")) : "success";
-    html += "<div class=\"message " + msgType + "\">" + msg + "</div>";
-  }
+  server->setContentLength(CONTENT_LENGTH_UNKNOWN);
+  server->send(200, "application/json", "");
+  server->sendContent("[");
+  char output[512];
+  constexpr size_t outputSize = sizeof(output);
+  bool seenFirst = false;
+  scanFiles(currentPath.c_str(), [this, &output, seenFirst](const FileInfo& info) mutable {
+    JsonDocument doc;
+    doc["name"] = info.name;
+    doc["size"] = info.size;
+    doc["isDirectory"] = info.isDirectory;
+    doc["isEpub"] = info.isEpub;
+    const size_t written = serializeJson(doc, output, outputSize);
+    if (written >= outputSize) {
+      // JSON output truncated; skip this entry to avoid sending malformed JSON
+      Serial.printf("[%lu] [WEB] Skipping file entry with oversized JSON for name: %s\n", millis(), info.name.c_str());
+      return;
+    }

-  // Hidden input to store current path for JavaScript
-  html += "<input type=\"hidden\" id=\"currentPath\" value=\"" + currentPath + "\">";
-
-  // Scan files in current path first (we need counts for the header)
-  std::vector<FileInfo> files = scanFiles(currentPath.c_str());
-
-  // Count items
-  int epubCount = 0;
-  int folderCount = 0;
-  size_t totalSize = 0;
-  for (const auto& file : files) {
-    if (file.isDirectory) {
-      folderCount++;
+    if (seenFirst) {
+      server->sendContent(",");
    } else {
-      if (file.isEpub) epubCount++;
-      totalSize += file.size;
+      seenFirst = true;
    }
-  }
-
-  // Page header with inline breadcrumb and action buttons
-  html += "<div class=\"page-header\">";
-  html += "<div class=\"page-header-left\">";
-  html += "<h1>📁 File Manager</h1>";
-
-  // Inline breadcrumb
-  html += "<div class=\"breadcrumb-inline\">";
-  html += "<span class=\"sep\">/</span>";
-
-  if (currentPath == "/") {
-    html += "<span class=\"current\">🏠</span>";
-  } else {
-    html += "<a href=\"/files\">🏠</a>";
-    String pathParts = currentPath.substring(1);  // Remove leading /
-    String buildPath = "";
-    int start = 0;
-    int end = pathParts.indexOf('/');
-
-    while (start < (int)pathParts.length()) {
-      String part;
-      if (end == -1) {
-        part = pathParts.substring(start);
-        buildPath += "/" + part;
-        html += "<span class=\"sep\">/</span><span class=\"current\">" + escapeHtml(part) + "</span>";
-        break;
-      } else {
-        part = pathParts.substring(start, end);
-        buildPath += "/" + part;
-        html += "<span class=\"sep\">/</span><a href=\"/files?path=" + buildPath + "\">" + escapeHtml(part) + "</a>";
-        start = end + 1;
-        end = pathParts.indexOf('/', start);
-      }
-    }
-  }
-  html += "</div>";
-  html += "</div>";
-
-  // Action buttons
-  html += "<div class=\"action-buttons\">";
-  html += "<button class=\"action-btn upload-action-btn\" onclick=\"openUploadModal()\">";
-  html += "📤 Upload";
-  html += "</button>";
-  html += "<button class=\"action-btn folder-action-btn\" onclick=\"openFolderModal()\">";
-  html += "📁 New Folder";
-  html += "</button>";
-  html += "</div>";
-
-  html += "</div>";  // end page-header
-
-  // Contents card with inline summary
-  html += "<div class=\"card\">";
-
-  // Contents header with inline stats
-  html += "<div class=\"contents-header\">";
-  html += "<h2 class=\"contents-title\">Contents</h2>";
-  html += "<span class=\"summary-inline\">";
-  html += String(folderCount) + " folder" + (folderCount != 1 ? "s" : "") + ", ";
-  html += String(files.size() - folderCount) + " file" + ((files.size() - folderCount) != 1 ? "s" : "") + ", ";
-  html += formatFileSize(totalSize);
-  html += "</span>";
-  html += "</div>";
-
-  if (files.empty()) {
-    html += "<div class=\"no-files\">This folder is empty</div>";
-  } else {
-    html += "<table class=\"file-table\">";
-    html += "<tr><th>Name</th><th>Type</th><th>Size</th><th class=\"actions-col\">Actions</th></tr>";
-
-    // Sort files: folders first, then epub files, then other files, alphabetically within each group
-    std::sort(files.begin(), files.end(), [](const FileInfo& a, const FileInfo& b) {
-      // Folders come first
-      if (a.isDirectory != b.isDirectory) return a.isDirectory > b.isDirectory;
-      // Then sort by epub status (epubs first among files)
-      if (a.isEpub != b.isEpub) return a.isEpub > b.isEpub;
-      // Then alphabetically
-      return a.name < b.name;
-    });
-
-    for (const auto& file : files) {
-      String rowClass;
-      String icon;
-      String badge;
-      String typeStr;
-      String sizeStr;
-
-      if (file.isDirectory) {
-        rowClass = "folder-row";
-        icon = "📁";
-        badge = "<span class=\"folder-badge\">FOLDER</span>";
-        typeStr = "Folder";
-        sizeStr = "-";
-
-        // Build the path to this folder
-        String folderPath = currentPath;
-        if (!folderPath.endsWith("/")) folderPath += "/";
-        folderPath += file.name;
-
-        html += "<tr class=\"" + rowClass + "\">";
-        html += "<td><span class=\"file-icon\">" + icon + "</span>";
-        html += "<a href=\"/files?path=" + folderPath + "\" class=\"folder-link\">" + escapeHtml(file.name) + "</a>" +
-                badge + "</td>";
-        html += "<td>" + typeStr + "</td>";
-        html += "<td>" + sizeStr + "</td>";
-        // Escape quotes for JavaScript string
-        String escapedName = file.name;
-        escapedName.replace("'", "\\'");
-        String escapedPath = folderPath;
-        escapedPath.replace("'", "\\'");
-        html += "<td class=\"actions-col\"><button class=\"delete-btn\" onclick=\"openDeleteModal('" + escapedName +
-                "', '" + escapedPath + "', true)\" title=\"Delete folder\">🗑️</button></td>";
-        html += "</tr>";
-      } else {
-        rowClass = file.isEpub ? "epub-file" : "";
-        icon = file.isEpub ? "📗" : "📄";
-        badge = file.isEpub ? "<span class=\"epub-badge\">EPUB</span>" : "";
-        String ext = file.name.substring(file.name.lastIndexOf('.') + 1);
-        ext.toUpperCase();
-        typeStr = ext;
-        sizeStr = formatFileSize(file.size);
-
-        // Build file path for delete
-        String filePath = currentPath;
-        if (!filePath.endsWith("/")) filePath += "/";
-        filePath += file.name;
-
-        html += "<tr class=\"" + rowClass + "\">";
-        html += "<td><span class=\"file-icon\">" + icon + "</span>" + escapeHtml(file.name) + badge + "</td>";
-        html += "<td>" + typeStr + "</td>";
-        html += "<td>" + sizeStr + "</td>";
-        // Escape quotes for JavaScript string
-        String escapedName = file.name;
-        escapedName.replace("'", "\\'");
-        String escapedPath = filePath;
-        escapedPath.replace("'", "\\'");
-        html += "<td class=\"actions-col\"><button class=\"delete-btn\" onclick=\"openDeleteModal('" + escapedName +
-                "', '" + escapedPath + "', false)\" title=\"Delete file\">🗑️</button></td>";
-        html += "</tr>";
-      }
-    }
-
-    html += "</table>";
-  }
-
-  html += "</div>";
-
-  html += FilesPageFooterHtml;
-
-  server->send(200, "text/html", html);
+    server->sendContent(output);
+  });
+  server->sendContent("]");
+  // End of streamed response, empty chunk to signal client
+  server->sendContent("");
  Serial.printf("[%lu] [WEB] Served file listing page for path: %s\n", millis(), currentPath.c_str());
 }

@ -469,7 +269,7 @@ static size_t uploadSize = 0;
 static bool uploadSuccess = false;
 static String uploadError = "";

-void CrossPointWebServer::handleUpload() {
+void CrossPointWebServer::handleUpload() const {
  static unsigned long lastWriteTime = 0;
  static unsigned long uploadStartTime = 0;
  static size_t lastLoggedSize = 0;
@ -480,7 +280,7 @@ void CrossPointWebServer::handleUpload() {
    return;
  }

-  HTTPUpload& upload = server->upload();
+  const HTTPUpload& upload = server->upload();

  if (upload.status == UPLOAD_FILE_START) {
    uploadFileName = upload.filename;
@ -533,10 +333,10 @@ void CrossPointWebServer::handleUpload() {
    Serial.printf("[%lu] [WEB] [UPLOAD] File created successfully: %s\n", millis(), filePath.c_str());
  } else if (upload.status == UPLOAD_FILE_WRITE) {
    if (uploadFile && uploadError.isEmpty()) {
-      unsigned long writeStartTime = millis();
-      size_t written = uploadFile.write(upload.buf, upload.currentSize);
-      unsigned long writeEndTime = millis();
-      unsigned long writeDuration = writeEndTime - writeStartTime;
+      const unsigned long writeStartTime = millis();
+      const size_t written = uploadFile.write(upload.buf, upload.currentSize);
+      const unsigned long writeEndTime = millis();
+      const unsigned long writeDuration = writeEndTime - writeStartTime;

      if (written != upload.currentSize) {
        uploadError = "Failed to write to SD card - disk may be full";
@ -548,9 +348,9 @@ void CrossPointWebServer::handleUpload() {

        // Log progress every 50KB or if write took >100ms
        if (uploadSize - lastLoggedSize >= 51200 || writeDuration > 100) {
-          unsigned long timeSinceStart = millis() - uploadStartTime;
-          unsigned long timeSinceLastWrite = millis() - lastWriteTime;
-          float kbps = (uploadSize / 1024.0) / (timeSinceStart / 1000.0);
+          const unsigned long timeSinceStart = millis() - uploadStartTime;
+          const unsigned long timeSinceLastWrite = millis() - lastWriteTime;
+          const float kbps = (uploadSize / 1024.0) / (timeSinceStart / 1000.0);

          Serial.printf(
              "[%lu] [WEB] [UPLOAD] Progress: %d bytes (%.1f KB), %.1f KB/s, write took %lu ms, gap since last: %lu "
@ -584,23 +384,23 @@ void CrossPointWebServer::handleUpload() {
  }
 }

-void CrossPointWebServer::handleUploadPost() {
+void CrossPointWebServer::handleUploadPost() const {
  if (uploadSuccess) {
    server->send(200, "text/plain", "File uploaded successfully: " + uploadFileName);
  } else {
-    String error = uploadError.isEmpty() ? "Unknown error during upload" : uploadError;
+    const String error = uploadError.isEmpty() ? "Unknown error during upload" : uploadError;
    server->send(400, "text/plain", error);
  }
 }

-void CrossPointWebServer::handleCreateFolder() {
+void CrossPointWebServer::handleCreateFolder() const {
  // Get folder name from form data
  if (!server->hasArg("name")) {
    server->send(400, "text/plain", "Missing folder name");
    return;
  }

-  String folderName = server->arg("name");
+  const String folderName = server->arg("name");

  // Validate folder name
  if (folderName.isEmpty()) {
@ -643,7 +443,7 @@ void CrossPointWebServer::handleCreateFolder() {
  }
 }

-void CrossPointWebServer::handleDelete() {
+void CrossPointWebServer::handleDelete() const {
  // Get path from form data
  if (!server->hasArg("path")) {
    server->send(400, "text/plain", "Missing path");
@ -651,7 +451,7 @@ void CrossPointWebServer::handleDelete() {
  }

  String itemPath = server->arg("path");
-  String itemType = server->hasArg("type") ? server->arg("type") : "file";
+  const String itemType = server->hasArg("type") ? server->arg("type") : "file";

  // Validate path
  if (itemPath.isEmpty() || itemPath == "/") {
@ -665,7 +465,7 @@ void CrossPointWebServer::handleDelete() {
  }

  // Security check: prevent deletion of protected items
-  String itemName = itemPath.substring(itemPath.lastIndexOf('/') + 1);
+  const String itemName = itemPath.substring(itemPath.lastIndexOf('/') + 1);

  // Check if item starts with a dot (hidden/system file)
  if (itemName.startsWith(".")) {
--- a/src/activities/network/server/CrossPointWebServer.h
+++ b/src/activities/network/server/CrossPointWebServer.h
@ -2,8 +2,6 @@

 #include <WebServer.h>

-#include <functional>
-#include <string>
 #include <vector>

 // Structure to hold file information
@ -26,7 +24,7 @@ class CrossPointWebServer {
  void stop();

  // Call this periodically to handle client requests
-  void handleClient();
+  void handleClient() const;

  // Check if server is running
  bool isRunning() const { return running; }
@ -35,22 +33,23 @@ class CrossPointWebServer {
  uint16_t getPort() const { return port; }

 private:
-  WebServer* server = nullptr;
+  std::unique_ptr<WebServer> server = nullptr;
  bool running = false;
  uint16_t port = 80;

  // File scanning
-  std::vector<FileInfo> scanFiles(const char* path = "/");
-  String formatFileSize(size_t bytes);
-  bool isEpubFile(const String& filename);
+  void scanFiles(const char* path, const std::function<void(FileInfo)>& callback) const;
+  String formatFileSize(size_t bytes) const;
+  bool isEpubFile(const String& filename) const;

  // Request handlers
-  void handleRoot();
-  void handleNotFound();
-  void handleStatus();
-  void handleFileList();
-  void handleUpload();
-  void handleUploadPost();
-  void handleCreateFolder();
-  void handleDelete();
+  void handleRoot() const;
+  void handleNotFound() const;
+  void handleStatus() const;
+  void handleFileList() const;
+  void handleFileListData() const;
+  void handleUpload() const;
+  void handleUploadPost() const;
+  void handleCreateFolder() const;
+  void handleDelete() const;
 };
--- a/src/network/html/FilesPage.html
+++ b/src/network/html/FilesPage.html
@ -0,0 +1,859 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>CrossPoint Reader - Files</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Oxygen, Ubuntu, sans-serif;
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 20px;
+      background-color: #f5f5f5;
+      color: #333;
+    }
+    h1 {
+      color: #2c3e50;
+      margin-bottom: 5px;
+    }
+    h2 {
+      color: #34495e;
+      margin-top: 0;
+    }
+    .card {
+      background: white;
+      border-radius: 8px;
+      padding: 20px;
+      margin: 15px 0;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    .page-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 15px;
+      margin-bottom: 20px;
+      padding-bottom: 15px;
+      border-bottom: 2px solid #3498db;
+    }
+    .page-header-left {
+      display: flex;
+      align-items: baseline;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+    .breadcrumb-inline {
+      color: #7f8c8d;
+      font-size: 1.1em;
+    }
+    .breadcrumb-inline a {
+      color: #3498db;
+      text-decoration: none;
+    }
+    .breadcrumb-inline a:hover {
+      text-decoration: underline;
+    }
+    .breadcrumb-inline .sep {
+      margin: 0 6px;
+      color: #bdc3c7;
+    }
+    .breadcrumb-inline .current {
+      color: #2c3e50;
+      font-weight: 500;
+    }
+    .nav-links {
+      margin: 20px 0;
+    }
+    .nav-links a {
+      display: inline-block;
+      padding: 10px 20px;
+      background-color: #3498db;
+      color: white;
+      text-decoration: none;
+      border-radius: 4px;
+      margin-right: 10px;
+    }
+    .nav-links a:hover {
+      background-color: #2980b9;
+    }
+    /* Action buttons */
+    .action-buttons {
+      display: flex;
+      gap: 10px;
+    }
+    .action-btn {
+      color: white;
+      padding: 10px 16px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 0.95em;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .upload-action-btn {
+      background-color: #27ae60;
+    }
+    .upload-action-btn:hover {
+      background-color: #219a52;
+    }
+    .folder-action-btn {
+      background-color: #f39c12;
+    }
+    .folder-action-btn:hover {
+      background-color: #d68910;
+    }
+    /* Upload modal */
+    .modal-overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 200;
+      justify-content: center;
+      align-items: center;
+    }
+    .modal-overlay.open {
+      display: flex;
+    }
+    .modal {
+      background: white;
+      border-radius: 8px;
+      padding: 25px;
+      max-width: 450px;
+      width: 90%;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+    }
+    .modal h3 {
+      margin: 0 0 15px 0;
+      color: #2c3e50;
+    }
+    .modal-close {
+      float: right;
+      background: none;
+      border: none;
+      font-size: 1.5em;
+      cursor: pointer;
+      color: #7f8c8d;
+      line-height: 1;
+    }
+    .modal-close:hover {
+      color: #2c3e50;
+    }
+    .file-table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    .file-table th,
+    .file-table td {
+      padding: 12px;
+      text-align: left;
+      border-bottom: 1px solid #eee;
+    }
+    .file-table th {
+      background-color: #f8f9fa;
+      font-weight: 600;
+      color: #7f8c8d;
+    }
+    .file-table tr:hover {
+      background-color: #f8f9fa;
+    }
+    .epub-file {
+      background-color: #e8f6e9 !important;
+    }
+    .epub-file:hover {
+      background-color: #d4edda !important;
+    }
+    .folder-row {
+      background-color: #fff9e6 !important;
+    }
+    .folder-row:hover {
+      background-color: #fff3cd !important;
+    }
+    .epub-badge {
+      display: inline-block;
+      padding: 2px 8px;
+      background-color: #27ae60;
+      color: white;
+      border-radius: 10px;
+      font-size: 0.75em;
+      margin-left: 8px;
+    }
+    .folder-badge {
+      display: inline-block;
+      padding: 2px 8px;
+      background-color: #f39c12;
+      color: white;
+      border-radius: 10px;
+      font-size: 0.75em;
+      margin-left: 8px;
+    }
+    .file-icon {
+      margin-right: 8px;
+    }
+    .folder-link {
+      color: #2c3e50;
+      text-decoration: none;
+      cursor: pointer;
+    }
+    .folder-link:hover {
+      color: #3498db;
+      text-decoration: underline;
+    }
+    .upload-form {
+      margin-top: 10px;
+    }
+    .upload-form input[type="file"] {
+      margin: 10px 0;
+      width: 100%;
+    }
+    .upload-btn {
+      background-color: #27ae60;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1em;
+      width: 100%;
+    }
+    .upload-btn:hover {
+      background-color: #219a52;
+    }
+    .upload-btn:disabled {
+      background-color: #95a5a6;
+      cursor: not-allowed;
+    }
+    .file-info {
+      color: #7f8c8d;
+      font-size: 0.85em;
+      margin: 8px 0;
+    }
+    .no-files {
+      text-align: center;
+      color: #95a5a6;
+      padding: 40px;
+      font-style: italic;
+    }
+    .message {
+      padding: 15px;
+      border-radius: 4px;
+      margin: 15px 0;
+    }
+    .message.success {
+      background-color: #d4edda;
+      color: #155724;
+      border: 1px solid #c3e6cb;
+    }
+    .message.error {
+      background-color: #f8d7da;
+      color: #721c24;
+      border: 1px solid #f5c6cb;
+    }
+    .contents-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .contents-title {
+      font-size: 1.1em;
+      font-weight: 600;
+      color: #34495e;
+      margin: 0;
+    }
+    .summary-inline {
+      color: #7f8c8d;
+      font-size: 0.9em;
+    }
+    #progress-container {
+      display: none;
+      margin-top: 10px;
+    }
+    #progress-bar {
+      width: 100%;
+      height: 20px;
+      background-color: #e0e0e0;
+      border-radius: 10px;
+      overflow: hidden;
+    }
+    #progress-fill {
+      height: 100%;
+      background-color: #27ae60;
+      width: 0%;
+      transition: width 0.3s;
+    }
+    #progress-text {
+      text-align: center;
+      margin-top: 5px;
+      font-size: 0.9em;
+      color: #7f8c8d;
+    }
+    .folder-form {
+      margin-top: 10px;
+    }
+    .folder-input {
+      width: 100%;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 1em;
+      margin-bottom: 10px;
+      box-sizing: border-box;
+    }
+    .folder-btn {
+      background-color: #f39c12;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1em;
+      width: 100%;
+    }
+    .folder-btn:hover {
+      background-color: #d68910;
+    }
+    /* Delete button styles */
+    .delete-btn {
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 1.1em;
+      padding: 4px 8px;
+      border-radius: 4px;
+      color: #95a5a6;
+      transition: all 0.15s;
+    }
+    .delete-btn:hover {
+      background-color: #fee;
+      color: #e74c3c;
+    }
+    .actions-col {
+      width: 60px;
+      text-align: center;
+    }
+    /* Delete modal */
+    .delete-warning {
+      color: #e74c3c;
+      font-weight: 600;
+      margin: 10px 0;
+    }
+    .delete-item-name {
+      font-weight: 600;
+      color: #2c3e50;
+      word-break: break-all;
+    }
+    .delete-btn-confirm {
+      background-color: #e74c3c;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1em;
+      width: 100%;
+    }
+    .delete-btn-confirm:hover {
+      background-color: #c0392b;
+    }
+    .delete-btn-cancel {
+      background-color: #95a5a6;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1em;
+      width: 100%;
+      margin-top: 10px;
+    }
+    .delete-btn-cancel:hover {
+      background-color: #7f8c8d;
+    }
+    .loader-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 20px 0;
+    }
+    .loader {
+      width: 48px;
+      height: 48px;
+      border: 5px solid #AAA;
+      border-bottom-color: transparent;
+      border-radius: 50%;
+      display: inline-block;
+      box-sizing: border-box;
+      animation: rotation 1s linear infinite;
+    }
+    @keyframes rotation {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    /* Mobile responsive styles */
+    @media (max-width: 600px) {
+      body {
+        padding: 10px;
+        font-size: 14px;
+      }
+      .card {
+        padding: 12px;
+        margin: 10px 0;
+      }
+      .page-header {
+        gap: 10px;
+        margin-bottom: 12px;
+        padding-bottom: 10px;
+      }
+      .page-header-left {
+        gap: 8px;
+      }
+      h1 {
+        font-size: 1.3em;
+      }
+      .breadcrumb-inline {
+        font-size: 0.95em;
+      }
+      .nav-links a {
+        padding: 8px 12px;
+        margin-right: 6px;
+        font-size: 0.9em;
+      }
+      .action-buttons {
+        gap: 6px;
+      }
+      .action-btn {
+        padding: 8px 10px;
+        font-size: 0.85em;
+      }
+      .file-table th,
+      .file-table td {
+        padding: 8px 6px;
+        font-size: 0.9em;
+      }
+      .file-table th {
+        font-size: 0.85em;
+      }
+      .file-icon {
+        margin-right: 4px;
+      }
+      .epub-badge,
+      .folder-badge {
+        padding: 2px 5px;
+        font-size: 0.65em;
+        margin-left: 4px;
+      }
+      .contents-header {
+        margin-bottom: 8px;
+        flex-wrap: wrap;
+        gap: 4px;
+      }
+      .contents-title {
+        font-size: 1em;
+      }
+      .summary-inline {
+        font-size: 0.8em;
+      }
+      .modal {
+        padding: 15px;
+      }
+      .modal h3 {
+        font-size: 1.1em;
+      }
+      .actions-col {
+        width: 40px;
+      }
+      .delete-btn {
+        font-size: 1em;
+        padding: 2px 4px;
+      }
+      .no-files {
+        padding: 20px;
+        font-size: 0.9em;
+      }
+    }
+  </style>
+</head>
+<body>
+<div class="nav-links">
+  <a href="/">Home</a>
+  <a href="/files">File Manager</a>
+</div>
+
+<div class="page-header">
+  <div class="page-header-left">
+    <h1>📁 File Manager</h1>
+    <div class="breadcrumb-inline" id="directory-breadcrumbs"></div>
+  </div>
+
+  <div class="action-buttons">
+    <button class="action-btn upload-action-btn" onclick="openUploadModal()">📤 Upload</button>
+    <button class="action-btn folder-action-btn" onclick="openFolderModal()">📁 New Folder</button>
+  </div>
+</div>
+
+<div class="card">
+  <div class="contents-header">
+    <h2 class="contents-title">Contents</h2>
+    <span class="summary-inline" id="folder-summary"></span>
+  </div>
+
+  <div id="file-table">
+    <div class="loader-container">
+      <span class="loader"></span>
+    </div>
+  </div>
+</div>
+
+<div class="card">
+  <p style="text-align: center; color: #95a5a6; margin: 0;">
+    CrossPoint E-Reader • Open Source
+  </p>
+</div>
+
+<!-- Upload Modal -->
+<div class="modal-overlay" id="uploadModal">
+  <div class="modal">
+    <button class="modal-close" onclick="closeUploadModal()">&times;</button>
+    <h3>📤 Upload file</h3>
+    <div class="upload-form">
+      <p class="file-info">Select a file to upload to <strong id="uploadPathDisplay"></strong></p>
+      <input type="file" id="fileInput" onchange="validateFile()">
+      <button id="uploadBtn" class="upload-btn" onclick="uploadFile()" disabled>Upload</button>
+      <div id="progress-container">
+        <div id="progress-bar"><div id="progress-fill"></div></div>
+        <div id="progress-text"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- New Folder Modal -->
+<div class="modal-overlay" id="folderModal">
+  <div class="modal">
+    <button class="modal-close" onclick="closeFolderModal()">&times;</button>
+    <h3>📁 New Folder</h3>
+    <div class="folder-form">
+      <p class="file-info">Create a new folder in <strong id="folderPathDisplay"></strong></p>
+      <input type="text" id="folderName" class="folder-input" placeholder="Folder name...">
+      <button class="folder-btn" onclick="createFolder()">Create Folder</button>
+    </div>
+  </div>
+</div>
+
+<!-- Delete Confirmation Modal -->
+<div class="modal-overlay" id="deleteModal">
+  <div class="modal">
+    <button class="modal-close" onclick="closeDeleteModal()">&times;</button>
+    <h3>🗑️ Delete Item</h3>
+    <div class="folder-form">
+      <p class="delete-warning">⚠️ This action cannot be undone!</p>
+      <p class="file-info">Are you sure you want to delete:</p>
+      <p class="delete-item-name" id="deleteItemName"></p>
+      <input type="hidden" id="deleteItemPath">
+      <input type="hidden" id="deleteItemType">
+      <button class="delete-btn-confirm" onclick="confirmDelete()">Delete</button>
+      <button class="delete-btn-cancel" onclick="closeDeleteModal()">Cancel</button>
+    </div>
+  </div>
+</div>
+
+<script>
+  // get current path from query parameter
+  const currentPath = decodeURIComponent(new URLSearchParams(window.location.search).get('path') || '/');
+
+  function escapeHtml(unsafe) {
+    return unsafe
+      .replaceAll("&", "&amp;")
+      .replaceAll("<", "&lt;")
+      .replaceAll(">", "&gt;")
+      .replaceAll('"', "&quot;")
+      .replaceAll("'", "&#039;");
+  }
+
+  function formatFileSize(bytes) {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)).toLocaleString() + ' ' + sizes[i];
+  }
+
+  async function hydrate() {
+    // Close modals when clicking overlay
+    document.querySelectorAll('.modal-overlay').forEach(function(overlay) {
+      overlay.addEventListener('click', function(e) {
+        if (e.target === overlay) {
+          overlay.classList.remove('open');
+        }
+      });
+    });
+
+    const breadcrumbs = document.getElementById('directory-breadcrumbs');
+    const fileTable = document.getElementById('file-table');
+
+    let breadcrumbContent = '<span class="sep">/</span>';
+    if (currentPath === '/') {
+      breadcrumbContent += '<span class="current">🏠</span>';
+    } else {
+      breadcrumbContent += '<a href="/files">🏠</a>';
+      const pathSegments = currentPath.split('/');
+      pathSegments.slice(1, pathSegments.length - 1).forEach(function(segment, index) {
+        breadcrumbContent += '<span class="sep">/</span><a href="/files?path=' + encodeURIComponent(pathSegments.slice(0, index + 2).join('/')) + '">' + escapeHtml(segment) + '</a>';
+      });
+      breadcrumbContent += '<span class="sep">/</span>';
+      breadcrumbContent += '<span class="current">' + escapeHtml(pathSegments[pathSegments.length - 1]) + '</span>';
+    }
+    breadcrumbs.innerHTML = breadcrumbContent;
+
+    let files = [];
+    try {
+      const response = await fetch('/api/files?path=' + encodeURIComponent(currentPath));
+      if (!response.ok) {
+        throw new Error('Failed to load files: ' + response.status + ' ' + response.statusText);
+      }
+      files = await response.json();
+    } catch (e) {
+      console.error(e);
+      fileTable.innerHTML = '<div class="no-files">An error occurred while loading the files</div>';
+      return;
+    }
+
+    let folderCount = 0;
+    let totalSize = 0;
+    files.forEach(file => {
+      if (file.isDirectory) folderCount++;
+      totalSize += file.size;
+    });
+
+    document.getElementById('folder-summary').innerHTML = `${folderCount} folders, ${files.length - folderCount} files, ${formatFileSize(totalSize)}`;
+
+    if (files.length === 0) {
+      fileTable.innerHTML = '<div class="no-files">This folder is empty</div>';
+    } else {
+      let fileTableContent = '<table class="file-table">';
+      fileTableContent += '<tr><th>Name</th><th>Type</th><th>Size</th><th class="actions-col">Actions</th></tr>';
+
+      const sortedFiles = files.sort((a, b) => {
+        // Directories first, then epub files, then other files, alphabetically within each group
+        if (a.isDirectory && !b.isDirectory) return -1;
+        if (!a.isDirectory && b.isDirectory) return 1;
+        if (a.isEpub && !b.isEpub) return -1;
+        if (!a.isEpub && b.isEpub) return 1;
+        return a.name.localeCompare(b.name);
+      });
+
+      sortedFiles.forEach(file => {
+        if (file.isDirectory) {
+          let folderPath = currentPath;
+          if (!folderPath.endsWith("/")) folderPath += "/";
+          folderPath += file.name;
+
+          fileTableContent += '<tr class="folder-row">';
+          fileTableContent += `<td><span class="file-icon">📁</span><a href="/files?path=${encodeURIComponent(folderPath)}" class="folder-link">${escapeHtml(file.name)}</a><span class="folder-badge">FOLDER</span></td>`;
+          fileTableContent += '<td>Folder</td>';
+          fileTableContent += '<td>-</td>';
+          fileTableContent += `<td class="actions-col"><button class="delete-btn" onclick="openDeleteModal('${file.name.replaceAll("'", "\\'")}', '${folderPath.replaceAll("'", "\\'")}', true)" title="Delete folder">🗑️</button></td>`;
+          fileTableContent += '</tr>';
+        } else {
+          let filePath = currentPath;
+          if (!filePath.endsWith("/")) filePath += "/";
+          filePath += file.name;
+
+          fileTableContent += `<tr class="${file.isEpub ? 'epub-file' : ''}">`;
+          fileTableContent += `<td><span class="file-icon">${file.isEpub ? '📗' : '📄'}</span>${escapeHtml(file.name)}`;
+          if (file.isEpub) fileTableContent += '<span class="epub-badge">EPUB</span>';
+          fileTableContent += '</td>';
+          fileTableContent += `<td>${file.name.split('.').pop().toUpperCase()}</td>`;
+          fileTableContent += `<td>${formatFileSize(file.size)}</td>`;
+          fileTableContent += `<td class="actions-col"><button class="delete-btn" onclick="openDeleteModal('${file.name.replaceAll("'", "\\'")}', '${filePath.replaceAll("'", "\\'")}', false)" title="Delete file">🗑️</button></td>`;
+          fileTableContent += '</tr>';
+        }
+      });
+
+      fileTableContent += '</table>';
+      fileTable.innerHTML = fileTableContent;
+    }
+  }
+
+  // Modal functions
+  function openUploadModal() {
+    document.getElementById('uploadPathDisplay').textContent = currentPath === '/' ? '/ 🏠' : currentPath;
+    document.getElementById('uploadModal').classList.add('open');
+  }
+
+  function closeUploadModal() {
+    document.getElementById('uploadModal').classList.remove('open');
+    document.getElementById('fileInput').value = '';
+    document.getElementById('uploadBtn').disabled = true;
+    document.getElementById('progress-container').style.display = 'none';
+    document.getElementById('progress-fill').style.width = '0%';
+    document.getElementById('progress-fill').style.backgroundColor = '#27ae60';
+  }
+
+  function openFolderModal() {
+    document.getElementById('folderPathDisplay').textContent = currentPath === '/' ? '/ 🏠' : currentPath;
+    document.getElementById('folderModal').classList.add('open');
+    document.getElementById('folderName').value = '';
+  }
+
+  function closeFolderModal() {
+    document.getElementById('folderModal').classList.remove('open');
+  }
+
+  function validateFile() {
+    const fileInput = document.getElementById('fileInput');
+    const uploadBtn = document.getElementById('uploadBtn');
+    const file = fileInput.files[0];
+    uploadBtn.disabled = !file;
+  }
+
+  function uploadFile() {
+    const fileInput = document.getElementById('fileInput');
+    const file = fileInput.files[0];
+
+    if (!file) {
+      alert('Please select a file first!');
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const progressContainer = document.getElementById('progress-container');
+    const progressFill = document.getElementById('progress-fill');
+    const progressText = document.getElementById('progress-text');
+    const uploadBtn = document.getElementById('uploadBtn');
+
+    progressContainer.style.display = 'block';
+    uploadBtn.disabled = true;
+
+    const xhr = new XMLHttpRequest();
+    // Include path as query parameter since multipart form data doesn't make
+    // form fields available until after file upload completes
+    xhr.open('POST', '/upload?path=' + encodeURIComponent(currentPath), true);
+
+    xhr.upload.onprogress = function(e) {
+      if (e.lengthComputable) {
+        const percent = Math.round((e.loaded / e.total) * 100);
+        progressFill.style.width = percent + '%';
+        progressText.textContent = 'Uploading: ' + percent + '%';
+      }
+    };
+
+    xhr.onload = function() {
+      if (xhr.status === 200) {
+        progressText.textContent = 'Upload complete!';
+        setTimeout(function() {
+          window.location.reload();
+        }, 1000);
+      } else {
+        progressText.textContent = 'Upload failed: ' + xhr.responseText;
+        progressFill.style.backgroundColor = '#e74c3c';
+        uploadBtn.disabled = false;
+      }
+    };
+
+    xhr.onerror = function() {
+      progressText.textContent = 'Upload failed - network error';
+      progressFill.style.backgroundColor = '#e74c3c';
+      uploadBtn.disabled = false;
+    };
+
+    xhr.send(formData);
+  }
+
+  function createFolder() {
+    const folderName = document.getElementById('folderName').value.trim();
+
+    if (!folderName) {
+      alert('Please enter a folder name!');
+      return;
+    }
+
+    // Validate folder name (no special characters except underscore and hyphen)
+    const validName = /^[a-zA-Z0-9_\-]+$/.test(folderName);
+    if (!validName) {
+      alert('Folder name can only contain letters, numbers, underscores, and hyphens.');
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append('name', folderName);
+    formData.append('path', currentPath);
+
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', '/mkdir', true);
+
+    xhr.onload = function() {
+      if (xhr.status === 200) {
+        window.location.reload();
+      } else {
+        alert('Failed to create folder: ' + xhr.responseText);
+      }
+    };
+
+    xhr.onerror = function() {
+      alert('Failed to create folder - network error');
+    };
+
+    xhr.send(formData);
+  }
+
+  // Delete functions
+  function openDeleteModal(name, path, isFolder) {
+    document.getElementById('deleteItemName').textContent = (isFolder ? '📁 ' : '📄 ') + name;
+    document.getElementById('deleteItemPath').value = path;
+    document.getElementById('deleteItemType').value = isFolder ? 'folder' : 'file';
+    document.getElementById('deleteModal').classList.add('open');
+  }
+
+  function closeDeleteModal() {
+    document.getElementById('deleteModal').classList.remove('open');
+  }
+
+  function confirmDelete() {
+    const path = document.getElementById('deleteItemPath').value;
+    const itemType = document.getElementById('deleteItemType').value;
+
+    const formData = new FormData();
+    formData.append('path', path);
+    formData.append('type', itemType);
+
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', '/delete', true);
+
+    xhr.onload = function() {
+      if (xhr.status === 200) {
+        window.location.reload();
+      } else {
+        alert('Failed to delete: ' + xhr.responseText);
+        closeDeleteModal();
+      }
+    };
+
+    xhr.onerror = function() {
+      alert('Failed to delete - network error');
+      closeDeleteModal();
+    };
+
+    xhr.send(formData);
+  }
+
+  hydrate();
+</script>
+</body>
+</html>
--- a/src/network/html/HomePage.html
+++ b/src/network/html/HomePage.html
@ -83,7 +83,7 @@
      <h2>Device Status</h2>
      <div class="info-row">
        <span class="label">Version</span>
-        <span class="value">%VERSION%</span>
+        <span class="value" id="version"></span>
      </div>
      <div class="info-row">
        <span class="label">WiFi Status</span>
@ -91,11 +91,11 @@
      </div>
      <div class="info-row">
        <span class="label">IP Address</span>
-        <span class="value">%IP_ADDRESS%</span>
+        <span class="value" id="ip-address"></span>
      </div>
      <div class="info-row">
        <span class="label">Free Memory</span>
-        <span class="value">%FREE_HEAP% bytes</span>
+        <span class="value" id="free-heap"></span>
      </div>
    </div>

@ -104,5 +104,26 @@
        CrossPoint E-Reader • Open Source
      </p>
    </div>
+  <script>
+    async function fetchStatus() {
+      try {
+        const response = await fetch('/api/status');
+        if (!response.ok) {
+          throw new Error('Failed to fetch status: ' + response.status + ' ' + response.statusText);
+        }
+        const data = await response.json();
+        document.getElementById('version').textContent = data.version || 'N/A';
+        document.getElementById('ip-address').textContent = data.ip || 'N/A';
+        document.getElementById('free-heap').textContent = data.freeHeap
+          ? data.freeHeap.toLocaleString() + ' bytes'
+          : 'N/A';
+      } catch (error) {
+        console.error('Error fetching status:', error);
+      }
+    }
+
+    // Fetch status on page load
+    window.onload = fetchStatus;
+  </script>
  </body>
 </html>
Author	SHA1	Message	Date
Dave Allie	6fe28da41b	Cut release 0.8.1 Some checks are pending CI / build (push) Waiting to run Details	2025-12-22 03:20:22 +11:00
Dave Allie	689b539c6b	Stream CrossPointWebServer data over JSON APIs (#97 ) ## Summary * HTML files are now static, streamed directly to the client without modification * For any dynamic values, load via JSON APIs * For files page, we stream the JSON content as we scan the directory to avoid holding onto too much data ## Additional details * We were previously building up a very large string all generated on the X4 directly, we should be leveraging the browser * Fixes https://github.com/daveallie/crosspoint-reader/issues/94	2025-12-22 03:19:49 +11:00
Jonas Diemer	ce37c80c2d	Improve power button hold measurement for boot (#95 ) Improves the duration for which the power button needs to be held - see #53. I left the measurement code for the calibration value in, as it will likely change if we move the settings to NVS.	2025-12-22 00:53:55 +11:00
Dave Allie	b39ce22e54	Cleanup of activities	2025-12-22 00:48:16 +11:00