Cut release 0.8.1

## 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

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

src/activities/Activity.h

@@ -1,19 +1,25 @@
 #pragma once
-#include <InputManager.h>
 
+#include <HardwareSerial.h>
+
+#include <string>
+#include <utility>
+
+class InputManager;
 class GfxRenderer;
 
 class Activity {
  protected:
+  std::string name;
   GfxRenderer& renderer;
   InputManager& inputManager;
 
  public:
-  explicit Activity(GfxRenderer& renderer, InputManager& inputManager)
+  explicit Activity(std::string name, GfxRenderer& renderer, InputManager& inputManager)
-      : renderer(renderer), inputManager(inputManager) {}
+      : name(std::move(name)), renderer(renderer), inputManager(inputManager) {}
   virtual ~Activity() = default;
-  virtual void onEnter() {}
+  virtual void onEnter() { Serial.printf("[%lu] [ACT] Entering activity: %s\n", millis(), name.c_str()); }
-  virtual void onExit() {}
+  virtual void onExit() { Serial.printf("[%lu] [ACT] Exiting activity: %s\n", millis(), name.c_str()); }
   virtual void loop() {}
   virtual bool skipLoopDelay() { return false; }
 };

src/activities/ActivityWithSubactivity.cpp

@@ -18,4 +18,7 @@ void ActivityWithSubactivity::loop() {
   }
 }
 
-void ActivityWithSubactivity::onExit() { exitActivity(); }
+void ActivityWithSubactivity::onExit() {
+  Activity::onExit();
+  exitActivity();
+}

src/activities/ActivityWithSubactivity.h

@@ -10,8 +10,8 @@ class ActivityWithSubactivity : public Activity {
   void enterNewActivity(Activity* activity);
 
  public:
-  explicit ActivityWithSubactivity(GfxRenderer& renderer, InputManager& inputManager)
+  explicit ActivityWithSubactivity(std::string name, GfxRenderer& renderer, InputManager& inputManager)
-      : Activity(renderer, inputManager) {}
+      : Activity(std::move(name), renderer, inputManager) {}
   void loop() override;
   void onExit() override;
 };

src/activities/boot_sleep/BootActivity.cpp

@@ -6,6 +6,8 @@
 #include "images/CrossLarge.h"
 
 void BootActivity::onEnter() {
+  Activity::onEnter();
+
   const auto pageWidth = GfxRenderer::getScreenWidth();
   const auto pageHeight = GfxRenderer::getScreenHeight();
 

src/activities/boot_sleep/BootActivity.h

@@ -3,6 +3,6 @@
 
 class BootActivity final : public Activity {
  public:
-  explicit BootActivity(GfxRenderer& renderer, InputManager& inputManager) : Activity(renderer, inputManager) {}
+  explicit BootActivity(GfxRenderer& renderer, InputManager& inputManager) : Activity("Boot", renderer, inputManager) {}
   void onEnter() override;
 };

src/activities/boot_sleep/SleepActivity.cpp

@@ -12,6 +12,7 @@
 #include "images/CrossLarge.h"
 
 void SleepActivity::onEnter() {
+  Activity::onEnter();
   renderPopup("Entering Sleep...");
 
   if (SETTINGS.sleepScreen == CrossPointSettings::SLEEP_SCREEN_MODE::CUSTOM) {
@@ -170,11 +171,16 @@ void SleepActivity::renderBitmapSleepScreen(const Bitmap& bitmap) const {
 }
 
 void SleepActivity::renderCoverSleepScreen() const {
+  if (APP_STATE.openEpubPath.empty()) {
+    return renderDefaultSleepScreen();
+  }
+
   Epub lastEpub(APP_STATE.openEpubPath, "/.crosspoint");
   if (!lastEpub.load()) {
     Serial.println("[SLP] Failed to load last epub");
     return renderDefaultSleepScreen();
   }
+
   if (!lastEpub.generateCoverBmp()) {
     Serial.println("[SLP] Failed to generate cover bmp");
     return renderDefaultSleepScreen();

src/activities/boot_sleep/SleepActivity.h

@@ -5,7 +5,8 @@ class Bitmap;
 
 class SleepActivity final : public Activity {
  public:
-  explicit SleepActivity(GfxRenderer& renderer, InputManager& inputManager) : Activity(renderer, inputManager) {}
+  explicit SleepActivity(GfxRenderer& renderer, InputManager& inputManager)
+      : Activity("Sleep", renderer, inputManager) {}
   void onEnter() override;
 
  private:

src/activities/home/HomeActivity.cpp

@@ -1,6 +1,7 @@
 #include "HomeActivity.h"
 
 #include <GfxRenderer.h>
+#include <InputManager.h>
 #include <SD.h>
 
 #include "config.h"
@@ -15,6 +16,8 @@ void HomeActivity::taskTrampoline(void* param) {
 }
 
 void HomeActivity::onEnter() {
+  Activity::onEnter();
+
   renderingMutex = xSemaphoreCreateMutex();
 
   selectorIndex = 0;
@@ -31,6 +34,8 @@ void HomeActivity::onEnter() {
 }
 
 void HomeActivity::onExit() {
+  Activity::onExit();
+
   // Wait until not rendering to delete task to avoid killing mid-instruction to EPD
   xSemaphoreTake(renderingMutex, portMAX_DELAY);
   if (displayTaskHandle) {
@@ -79,8 +84,8 @@ void HomeActivity::displayTaskLoop() {
 void HomeActivity::render() const {
   renderer.clearScreen();
 
-  const auto pageWidth = GfxRenderer::getScreenWidth();
+  const auto pageWidth = renderer.getScreenWidth();
-  const auto pageHeight = GfxRenderer::getScreenHeight();
+  const auto pageHeight = renderer.getScreenHeight();
   renderer.drawCenteredText(READER_FONT_ID, 10, "CrossPoint Reader", true, BOLD);
 
   // Draw selection

src/activities/home/HomeActivity.h

@@ -23,7 +23,7 @@ class HomeActivity final : public Activity {
  public:
   explicit HomeActivity(GfxRenderer& renderer, InputManager& inputManager, const std::function<void()>& onReaderOpen,
                         const std::function<void()>& onSettingsOpen, const std::function<void()>& onFileTransferOpen)
-      : Activity(renderer, inputManager),
+      : Activity("Home", renderer, inputManager),
         onReaderOpen(onReaderOpen),
         onSettingsOpen(onSettingsOpen),
         onFileTransferOpen(onFileTransferOpen) {}

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) {
@@ -11,7 +13,8 @@ void CrossPointWebServerActivity::taskTrampoline(void* param) {
 }
 
 void CrossPointWebServerActivity::onEnter() {
-  Serial.printf("[%lu] [WEBACT] ========== CrossPointWebServerActivity onEnter ==========\n", millis());
+  ActivityWithSubactivity::onEnter();
+
   Serial.printf("[%lu] [WEBACT] [MEM] Free heap at onEnter: %d bytes\n", millis(), ESP.getFreeHeap());
 
   renderingMutex = xSemaphoreCreateMutex();
@@ -36,13 +39,13 @@ void CrossPointWebServerActivity::onEnter() {
 
   // Launch WiFi selection subactivity
   Serial.printf("[%lu] [WEBACT] Launching WifiSelectionActivity...\n", millis());
-  wifiSelection.reset(new WifiSelectionActivity(renderer, inputManager,
+  enterNewActivity(new WifiSelectionActivity(renderer, inputManager,
-                                                [this](bool connected) { onWifiSelectionComplete(connected); }));
+                                             [this](const bool connected) { onWifiSelectionComplete(connected); }));
-  wifiSelection->onEnter();
 }
 
 void CrossPointWebServerActivity::onExit() {
-  Serial.printf("[%lu] [WEBACT] ========== CrossPointWebServerActivity onExit START ==========\n", millis());
+  ActivityWithSubactivity::onExit();
+
   Serial.printf("[%lu] [WEBACT] [MEM] Free heap at onExit start: %d bytes\n", millis(), ESP.getFreeHeap());
 
   state = WebServerActivityState::SHUTTING_DOWN;
@@ -50,14 +53,6 @@ void CrossPointWebServerActivity::onExit() {
   // Stop the web server first (before disconnecting WiFi)
   stopWebServer();
 
-  // Exit WiFi selection subactivity if still active
-  if (wifiSelection) {
-    Serial.printf("[%lu] [WEBACT] Exiting WifiSelectionActivity...\n", millis());
-    wifiSelection->onExit();
-    wifiSelection.reset();
-    Serial.printf("[%lu] [WEBACT] WifiSelectionActivity exited\n", millis());
-  }
-
   // CRITICAL: Wait for LWIP stack to flush any pending packets
   Serial.printf("[%lu] [WEBACT] Waiting 500ms for network stack to flush pending packets...\n", millis());
   delay(500);
@@ -92,20 +87,17 @@ void CrossPointWebServerActivity::onExit() {
   Serial.printf("[%lu] [WEBACT] Mutex deleted\n", millis());
 
   Serial.printf("[%lu] [WEBACT] [MEM] Free heap at onExit end: %d bytes\n", millis(), ESP.getFreeHeap());
-  Serial.printf("[%lu] [WEBACT] ========== CrossPointWebServerActivity onExit COMPLETE ==========\n", millis());
 }
 
-void CrossPointWebServerActivity::onWifiSelectionComplete(bool connected) {
+void CrossPointWebServerActivity::onWifiSelectionComplete(const bool connected) {
   Serial.printf("[%lu] [WEBACT] WifiSelectionActivity completed, connected=%d\n", millis(), connected);
 
   if (connected) {
     // Get connection info before exiting subactivity
-    connectedIP = wifiSelection->getConnectedIP();
+    connectedIP = static_cast<WifiSelectionActivity*>(subActivity.get())->getConnectedIP();
     connectedSSID = WiFi.SSID().c_str();
 
-    // Exit the wifi selection subactivity
+    exitActivity();
-    wifiSelection->onExit();
-    wifiSelection.reset();
 
     // Start the web server
     startWebServer();
@@ -150,47 +142,40 @@ void CrossPointWebServerActivity::stopWebServer() {
 }
 
 void CrossPointWebServerActivity::loop() {
+  if (subActivity) {
+    // Forward loop to subactivity
+    subActivity->loop();
+    return;
+  }
+
   // Handle different states
-  switch (state) {
+  if (state == WebServerActivityState::SERVER_RUNNING) {
-    case WebServerActivityState::WIFI_SELECTION:
+    // Handle web server requests - call handleClient multiple times per loop
-      // Forward loop to WiFi selection subactivity
+    // to improve responsiveness and upload throughput
-      if (wifiSelection) {
+    if (webServer && webServer->isRunning()) {
-        wifiSelection->loop();
+      const unsigned long timeSinceLastHandleClient = millis() - lastHandleClientTime;
-      }
-      break;
 
-    case WebServerActivityState::SERVER_RUNNING:
+      // Log if there's a significant gap between handleClient calls (>100ms)
-      // Handle web server requests - call handleClient multiple times per loop
+      if (lastHandleClientTime > 0 && timeSinceLastHandleClient > 100) {
-      // to improve responsiveness and upload throughput
+        Serial.printf("[%lu] [WEBACT] WARNING: %lu ms gap since last handleClient\n", millis(),
-      if (webServer && webServer->isRunning()) {
+                      timeSinceLastHandleClient);
-        unsigned long timeSinceLastHandleClient = millis() - lastHandleClientTime;
-
-        // Log if there's a significant gap between handleClient calls (>100ms)
-        if (lastHandleClientTime > 0 && timeSinceLastHandleClient > 100) {
-          Serial.printf("[%lu] [WEBACT] WARNING: %lu ms gap since last handleClient\n", millis(),
-                        timeSinceLastHandleClient);
-        }
-
-        // Call handleClient multiple times to process pending requests faster
-        // This is critical for upload performance - HTTP file uploads send data
-        // in chunks and each handleClient() call processes incoming data
-        constexpr int HANDLE_CLIENT_ITERATIONS = 10;
-        for (int i = 0; i < HANDLE_CLIENT_ITERATIONS && webServer->isRunning(); i++) {
-          webServer->handleClient();
-        }
-        lastHandleClientTime = millis();
       }
 
-      // Handle exit on Back button
+      // Call handleClient multiple times to process pending requests faster
-      if (inputManager.wasPressed(InputManager::BTN_BACK)) {
+      // This is critical for upload performance - HTTP file uploads send data
-        onGoBack();
+      // in chunks and each handleClient() call processes incoming data
-        return;
+      constexpr int HANDLE_CLIENT_ITERATIONS = 10;
+      for (int i = 0; i < HANDLE_CLIENT_ITERATIONS && webServer->isRunning(); i++) {
+        webServer->handleClient();
       }
-      break;
+      lastHandleClientTime = millis();
+    }
 
-    case WebServerActivityState::SHUTTING_DOWN:
+    // Handle exit on Back button
-      // Do nothing - waiting for cleanup
+    if (inputManager.wasPressed(InputManager::BTN_BACK)) {
-      break;
+      onGoBack();
+      return;
+    }
   }
 }
 

src/activities/network/CrossPointWebServerActivity.h

@@ -7,9 +7,8 @@
 #include <memory>
 #include <string>
 
-#include "../Activity.h"
+#include "activities/ActivityWithSubactivity.h"
-#include "WifiSelectionActivity.h"
+#include "network/CrossPointWebServer.h"
-#include "server/CrossPointWebServer.h"
 
 // Web server activity states
 enum class WebServerActivityState {
@@ -26,16 +25,13 @@ enum class WebServerActivityState {
  * - Handles client requests in its loop() function
  * - Cleans up the server and shuts down WiFi on exit
  */
-class CrossPointWebServerActivity final : public Activity {
+class CrossPointWebServerActivity final : public ActivityWithSubactivity {
   TaskHandle_t displayTaskHandle = nullptr;
   SemaphoreHandle_t renderingMutex = nullptr;
   bool updateRequired = false;
   WebServerActivityState state = WebServerActivityState::WIFI_SELECTION;
   const std::function<void()> onGoBack;
 
-  // WiFi selection subactivity
-  std::unique_ptr<WifiSelectionActivity> wifiSelection;
-
   // Web server - owned by this activity
   std::unique_ptr<CrossPointWebServer> webServer;
 
@@ -58,7 +54,7 @@ class CrossPointWebServerActivity final : public Activity {
  public:
   explicit CrossPointWebServerActivity(GfxRenderer& renderer, InputManager& inputManager,
                                        const std::function<void()>& onGoBack)
-      : Activity(renderer, inputManager), onGoBack(onGoBack) {}
+      : ActivityWithSubactivity("CrossPointWebServer", renderer, inputManager), onGoBack(onGoBack) {}
   void onEnter() override;
   void onExit() override;
   void loop() override;

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) {
@@ -14,10 +15,14 @@ void WifiSelectionActivity::taskTrampoline(void* param) {
 }
 
 void WifiSelectionActivity::onEnter() {
+  Activity::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;
@@ -30,7 +35,6 @@ void WifiSelectionActivity::onEnter() {
   usedSavedPassword = false;
   savePromptSelection = 0;
   forgetPromptSelection = 0;
-  keyboard.reset();
 
   // Trigger first update to show scanning message
   updateRequired = true;
@@ -47,7 +51,8 @@ void WifiSelectionActivity::onEnter() {
 }
 
 void WifiSelectionActivity::onExit() {
-  Serial.printf("[%lu] [WIFI] ========== WifiSelectionActivity onExit START ==========\n", millis());
+  Activity::onExit();
+
   Serial.printf("[%lu] [WIFI] [MEM] Free heap at onExit start: %d bytes\n", millis(), ESP.getFreeHeap());
 
   // Stop any ongoing WiFi scan
@@ -78,7 +83,6 @@ void WifiSelectionActivity::onExit() {
   Serial.printf("[%lu] [WIFI] Mutex deleted\n", millis());
 
   Serial.printf("[%lu] [WIFI] [MEM] Free heap at onExit end: %d bytes\n", millis(), ESP.getFreeHeap());
-  Serial.printf("[%lu] [WIFI] ========== WifiSelectionActivity onExit COMPLETE ==========\n", millis());
 }
 
 void WifiSelectionActivity::startWifiScan() {
@@ -96,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
@@ -115,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()) {
@@ -152,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;
   }
@@ -178,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",
+    enterNewActivity(new KeyboardEntryActivity(renderer, inputManager, "Enter WiFi Password",
-                                             "",    // No initial text
+                                               "",    // No initial text
-                                             64,    // Max password length
+                                               64,    // Max password length
-                                             false  // Show password by default (hard keyboard to use)
+                                               false  // Show password by default (hard keyboard to use)
-                                             ));
+                                               ));
     updateRequired = true;
   } else {
     // Connect directly for open networks
@@ -200,8 +204,8 @@ void WifiSelectionActivity::attemptConnection() {
   WiFi.mode(WIFI_STA);
 
   // Get password from keyboard if we just entered it
-  if (keyboard && !usedSavedPassword) {
+  if (subActivity && !usedSavedPassword) {
-    enteredPassword = keyboard->getText();
+    enteredPassword = static_cast<KeyboardEntryActivity*>(subActivity.get())->getText();
   }
 
   if (selectedRequiresPassword && !enteredPassword.empty()) {
@@ -216,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
@@ -273,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()) {
@@ -283,7 +288,7 @@ void WifiSelectionActivity::loop() {
 
     if (keyboard->isCancelled()) {
       state = WifiSelectionState::NETWORK_LIST;
-      keyboard.reset();
+      exitActivity();
       updateRequired = true;
       return;
     }
@@ -307,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);
@@ -333,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; });
@@ -408,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
@@ -482,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;
+    constexpr int startY = 60;
-    const int lineHeight = 25;
+    constexpr int lineHeight = 25;
     const int maxVisibleNetworks = (pageHeight - startY - 40) / lineHeight;
 
     // Calculate scroll offset to keep selected item visible
@@ -555,8 +567,8 @@ void WifiSelectionActivity::renderPasswordEntry() const {
   renderer.drawCenteredText(UI_FONT_ID, 38, networkInfo.c_str(), true, REGULAR);
 
   // Draw keyboard
-  if (keyboard) {
+  if (subActivity) {
-    keyboard->render(58);
+    static_cast<KeyboardEntryActivity*>(subActivity.get())->render(58);
   }
 }
 
@@ -591,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);
@@ -615,9 +627,9 @@ void WifiSelectionActivity::renderSavePrompt() const {
 
   // Draw Yes/No buttons
   const int buttonY = top + 80;
-  const int buttonWidth = 60;
+  constexpr int buttonWidth = 60;
-  const int buttonSpacing = 30;
+  constexpr int buttonSpacing = 30;
-  const int totalWidth = buttonWidth * 2 + buttonSpacing;
+  constexpr int totalWidth = buttonWidth * 2 + buttonSpacing;
   const int startX = (pageWidth - totalWidth) / 2;
 
   // Draw "Yes" button
@@ -665,9 +677,9 @@ void WifiSelectionActivity::renderForgetPrompt() const {
 
   // Draw Yes/No buttons
   const int buttonY = top + 80;
-  const int buttonWidth = 60;
+  constexpr int buttonWidth = 60;
-  const int buttonSpacing = 30;
+  constexpr int buttonSpacing = 30;
-  const int totalWidth = buttonWidth * 2 + buttonSpacing;
+  constexpr int totalWidth = buttonWidth * 2 + buttonSpacing;
   const int startX = (pageWidth - totalWidth) / 2;
 
   // Draw "Yes" button

src/activities/network/WifiSelectionActivity.h

@@ -9,8 +9,7 @@
 #include <string>
 #include <vector>
 
-#include "../Activity.h"
+#include "activities/ActivityWithSubactivity.h"
-#include "../util/KeyboardEntryActivity.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(renderer, inputManager), onComplete(onComplete) {}
+      : ActivityWithSubactivity("WifiSelection", renderer, inputManager), onComplete(onComplete) {}
   void onEnter() override;
   void onExit() override;
   void loop() override;

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"
@@ -26,6 +27,8 @@ void EpubReaderActivity::taskTrampoline(void* param) {
 }
 
 void EpubReaderActivity::onEnter() {
+  ActivityWithSubactivity::onEnter();
+
   if (!epub) {
     return;
   }
@@ -61,6 +64,8 @@ void EpubReaderActivity::onEnter() {
 }
 
 void EpubReaderActivity::onExit() {
+  ActivityWithSubactivity::onExit();
+
   // Wait until not rendering to delete task to avoid killing mid-instruction to EPD
   xSemaphoreTake(renderingMutex, portMAX_DELAY);
   if (displayTaskHandle) {
@@ -75,8 +80,8 @@ void EpubReaderActivity::onExit() {
 
 void EpubReaderActivity::loop() {
   // Pass input responsibility to sub activity if exists
-  if (subAcitivity) {
+  if (subActivity) {
-    subAcitivity->loop();
+    subActivity->loop();
     return;
   }
 
@@ -84,11 +89,11 @@ void EpubReaderActivity::loop() {
   if (inputManager.wasPressed(InputManager::BTN_CONFIRM)) {
     // Don't start activity transition while rendering
     xSemaphoreTake(renderingMutex, portMAX_DELAY);
-    subAcitivity.reset(new EpubReaderChapterSelectionActivity(
+    exitActivity();
+    enterNewActivity(new EpubReaderChapterSelectionActivity(
         this->renderer, this->inputManager, epub, currentSpineIndex,
         [this] {
-          subAcitivity->onExit();
+          exitActivity();
-          subAcitivity.reset();
           updateRequired = true;
         },
         [this](const int newSpineIndex) {
@@ -97,11 +102,9 @@ void EpubReaderActivity::loop() {
             nextPageNumber = 0;
             section.reset();
           }
-          subAcitivity->onExit();
+          exitActivity();
-          subAcitivity.reset();
           updateRequired = true;
         }));
-    subAcitivity->onEnter();
     xSemaphoreGive(renderingMutex);
   }
 
@@ -330,8 +333,8 @@ void EpubReaderActivity::renderStatusBar() const {
   constexpr auto textY = 776;
 
   // Calculate progress in book
-  float sectionChapterProg = static_cast<float>(section->currentPage) / section->pageCount;
+  const float sectionChapterProg = static_cast<float>(section->currentPage) / section->pageCount;
-  uint8_t bookProgress = epub->calculateProgress(currentSpineIndex, sectionChapterProg);
+  const uint8_t bookProgress = epub->calculateProgress(currentSpineIndex, sectionChapterProg);
 
   // Right aligned text for progress counter
   const std::string progress = std::to_string(section->currentPage + 1) + "/" + std::to_string(section->pageCount) +

src/activities/reader/EpubReaderActivity.h

@@ -5,14 +5,13 @@
 #include <freertos/semphr.h>
 #include <freertos/task.h>
 
-#include "../Activity.h"
+#include "activities/ActivityWithSubactivity.h"
 
-class EpubReaderActivity final : public Activity {
+class EpubReaderActivity final : public ActivityWithSubactivity {
   std::shared_ptr<Epub> epub;
   std::unique_ptr<Section> section = nullptr;
   TaskHandle_t displayTaskHandle = nullptr;
   SemaphoreHandle_t renderingMutex = nullptr;
-  std::unique_ptr<Activity> subAcitivity = nullptr;
   int currentSpineIndex = 0;
   int nextPageNumber = 0;
   int pagesUntilFullRefresh = 0;
@@ -28,7 +27,7 @@ class EpubReaderActivity final : public Activity {
  public:
   explicit EpubReaderActivity(GfxRenderer& renderer, InputManager& inputManager, std::unique_ptr<Epub> epub,
                               const std::function<void()>& onGoBack)
-      : Activity(renderer, inputManager), epub(std::move(epub)), onGoBack(onGoBack) {}
+      : ActivityWithSubactivity("EpubReader", renderer, inputManager), epub(std::move(epub)), onGoBack(onGoBack) {}
   void onEnter() override;
   void onExit() override;
   void loop() override;

src/activities/reader/EpubReaderChapterSelectionActivity.cpp

@@ -1,6 +1,7 @@
 #include "EpubReaderChapterSelectionActivity.h"
 
 #include <GfxRenderer.h>
+#include <InputManager.h>
 #include <SD.h>
 
 #include "config.h"
@@ -16,6 +17,8 @@ void EpubReaderChapterSelectionActivity::taskTrampoline(void* param) {
 }
 
 void EpubReaderChapterSelectionActivity::onEnter() {
+  Activity::onEnter();
+
   if (!epub) {
     return;
   }
@@ -34,6 +37,8 @@ void EpubReaderChapterSelectionActivity::onEnter() {
 }
 
 void EpubReaderChapterSelectionActivity::onExit() {
+  Activity::onExit();
+
   // Wait until not rendering to delete task to avoid killing mid-instruction to EPD
   xSemaphoreTake(renderingMutex, portMAX_DELAY);
   if (displayTaskHandle) {

src/activities/reader/EpubReaderChapterSelectionActivity.h

@@ -27,7 +27,7 @@ class EpubReaderChapterSelectionActivity final : public Activity {
                                               const std::shared_ptr<Epub>& epub, const int currentSpineIndex,
                                               const std::function<void()>& onGoBack,
                                               const std::function<void(int newSpineIndex)>& onSelectSpineIndex)
-      : Activity(renderer, inputManager),
+      : Activity("EpubReaderChapterSelection", renderer, inputManager),
         epub(epub),
         currentSpineIndex(currentSpineIndex),
         onGoBack(onGoBack),

src/activities/reader/FileSelectionActivity.cpp

@@ -1,6 +1,7 @@
 #include "FileSelectionActivity.h"
 
 #include <GfxRenderer.h>
+#include <InputManager.h>
 #include <SD.h>
 
 #include "config.h"
@@ -48,6 +49,8 @@ void FileSelectionActivity::loadFiles() {
 }
 
 void FileSelectionActivity::onEnter() {
+  Activity::onEnter();
+
   renderingMutex = xSemaphoreCreateMutex();
 
   basepath = "/";
@@ -66,6 +69,8 @@ void FileSelectionActivity::onEnter() {
 }
 
 void FileSelectionActivity::onExit() {
+  Activity::onExit();
+
   // Wait until not rendering to delete task to avoid killing mid-instruction to EPD
   xSemaphoreTake(renderingMutex, portMAX_DELAY);
   if (displayTaskHandle) {

src/activities/reader/FileSelectionActivity.h

@@ -28,7 +28,7 @@ class FileSelectionActivity final : public Activity {
   explicit FileSelectionActivity(GfxRenderer& renderer, InputManager& inputManager,
                                  const std::function<void(const std::string&)>& onSelect,
                                  const std::function<void()>& onGoHome)
-      : Activity(renderer, inputManager), onSelect(onSelect), onGoHome(onGoHome) {}
+      : Activity("FileSelection", renderer, inputManager), onSelect(onSelect), onGoHome(onGoHome) {}
   void onEnter() override;
   void onExit() override;
   void loop() override;

src/activities/reader/ReaderActivity.cpp

@@ -50,6 +50,8 @@ void ReaderActivity::onGoToEpubReader(std::unique_ptr<Epub> epub) {
 }
 
 void ReaderActivity::onEnter() {
+  ActivityWithSubactivity::onEnter();
+
   if (initialEpubPath.empty()) {
     onGoToFileSelection();
     return;

src/activities/reader/ReaderActivity.h

@@ -17,7 +17,7 @@ class ReaderActivity final : public ActivityWithSubactivity {
  public:
   explicit ReaderActivity(GfxRenderer& renderer, InputManager& inputManager, std::string initialEpubPath,
                           const std::function<void()>& onGoBack)
-      : ActivityWithSubactivity(renderer, inputManager),
+      : ActivityWithSubactivity("Reader", renderer, inputManager),
         initialEpubPath(std::move(initialEpubPath)),
         onGoBack(onGoBack) {}
   void onEnter() override;

src/activities/settings/SettingsActivity.cpp

@@ -1,6 +1,7 @@
 #include "SettingsActivity.h"
 
 #include <GfxRenderer.h>
+#include <InputManager.h>
 
 #include "CrossPointSettings.h"
 #include "config.h"
@@ -21,6 +22,8 @@ void SettingsActivity::taskTrampoline(void* param) {
 }
 
 void SettingsActivity::onEnter() {
+  Activity::onEnter();
+
   renderingMutex = xSemaphoreCreateMutex();
 
   // Reset selection to first item
@@ -38,6 +41,8 @@ void SettingsActivity::onEnter() {
 }
 
 void SettingsActivity::onExit() {
+  Activity::onExit();
+
   // Wait until not rendering to delete task to avoid killing mid-instruction to EPD
   xSemaphoreTake(renderingMutex, portMAX_DELAY);
   if (displayTaskHandle) {
@@ -76,7 +81,7 @@ void SettingsActivity::loop() {
   }
 }
 
-void SettingsActivity::toggleCurrentSetting() {
+void SettingsActivity::toggleCurrentSetting() const {
   // Validate index
   if (selectedSettingIndex < 0 || selectedSettingIndex >= settingsCount) {
     return;

src/activities/settings/SettingsActivity.h

@@ -32,11 +32,11 @@ class SettingsActivity final : public Activity {
   static void taskTrampoline(void* param);
   [[noreturn]] void displayTaskLoop();
   void render() const;
-  void toggleCurrentSetting();
+  void toggleCurrentSetting() const;
 
  public:
   explicit SettingsActivity(GfxRenderer& renderer, InputManager& inputManager, const std::function<void()>& onGoHome)
-      : Activity(renderer, inputManager), onGoHome(onGoHome) {}
+      : Activity("Settings", renderer, inputManager), onGoHome(onGoHome) {}
   void onEnter() override;
   void onExit() override;
   void loop() override;

src/activities/util/FullScreenMessageActivity.cpp

@@ -5,6 +5,8 @@
 #include "config.h"
 
 void FullScreenMessageActivity::onEnter() {
+  Activity::onEnter();
+
   const auto height = renderer.getLineHeight(UI_FONT_ID);
   const auto top = (GfxRenderer::getScreenHeight() - height) / 2;
 

src/activities/util/FullScreenMessageActivity.h

@@ -16,6 +16,9 @@ class FullScreenMessageActivity final : public Activity {
   explicit FullScreenMessageActivity(GfxRenderer& renderer, InputManager& inputManager, std::string text,
                                      const EpdFontStyle style = REGULAR,
                                      const EInkDisplay::RefreshMode refreshMode = EInkDisplay::FAST_REFRESH)
-      : Activity(renderer, inputManager), text(std::move(text)), style(style), refreshMode(refreshMode) {}
+      : Activity("FullScreenMessage", renderer, inputManager),
+        text(std::move(text)),
+        style(style),
+        refreshMode(refreshMode) {}
   void onEnter() override;
 };

src/activities/util/KeyboardEntryActivity.cpp

@@ -12,11 +12,6 @@ const char* const KeyboardEntryActivity::keyboard[NUM_ROWS] = {
 const char* const KeyboardEntryActivity::keyboardShift[NUM_ROWS] = {"~!@#$%^&*()_+", "QWERTYUIOP{}|", "ASDFGHJKL:\"",
                                                                     "ZXCVBNM<>?", "^  _____<OK"};
 
-KeyboardEntryActivity::KeyboardEntryActivity(GfxRenderer& renderer, InputManager& inputManager,
-                                             const std::string& title, const std::string& initialText, size_t maxLength,
-                                             bool isPassword)
-    : Activity(renderer, inputManager), title(title), text(initialText), maxLength(maxLength), isPassword(isPassword) {}
-
 void KeyboardEntryActivity::setText(const std::string& newText) {
   text = newText;
   if (maxLength > 0 && text.length() > maxLength) {
@@ -37,15 +32,13 @@ void KeyboardEntryActivity::reset(const std::string& newTitle, const std::string
 }
 
 void KeyboardEntryActivity::onEnter() {
+  Activity::onEnter();
+
   // Reset state when entering the activity
   complete = false;
   cancelled = false;
 }
 
-void KeyboardEntryActivity::onExit() {
-  // Clean up if needed
-}
-
 void KeyboardEntryActivity::loop() {
   handleInput();
   render(10);

src/activities/util/KeyboardEntryActivity.h

@@ -34,7 +34,12 @@ class KeyboardEntryActivity : public Activity {
    * @param isPassword If true, display asterisks instead of actual characters
    */
   KeyboardEntryActivity(GfxRenderer& renderer, InputManager& inputManager, const std::string& title = "Enter Text",
-                        const std::string& initialText = "", size_t maxLength = 0, bool isPassword = false);
+                        const std::string& initialText = "", const size_t maxLength = 0, const bool isPassword = false)
+      : Activity("KeyboardEntry", renderer, inputManager),
+        title(title),
+        text(initialText),
+        maxLength(maxLength),
+        isPassword(isPassword) {}
 
   /**
    * Handle button input. Call this in your main loop.
@@ -85,7 +90,6 @@ class KeyboardEntryActivity : public Activity {
 
   // Activity overrides
   void onEnter() override;
-  void onExit() override;
   void loop() override;
 
  private:

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>

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>

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) &&
+    } while (inputManager.isPressed(InputManager::BTN_POWER) && inputManager.getHeldTime() < calibratedPressDuration);
-             inputManager.getHeldTime() < SETTINGS.getPowerButtonDuration());
+    abort = inputManager.getHeldTime() < calibratedPressDuration;
-    abort = inputManager.getHeldTime() < SETTINGS.getPowerButtonDuration();
   } else {
     abort = true;
   }
@@ -119,14 +126,12 @@ void enterDeepSleep() {
   exitActivity();
   enterNewActivity(new SleepActivity(renderer, inputManager));
 
-  Serial.printf("[%lu] [   ] Entering deep sleep.\n", millis());
-  delay(1000);  // Allow Serial buffer to empty and display to update
-
-  // Enable Wakeup on LOW (button press)
-  esp_deep_sleep_enable_gpio_wakeup(1ULL << InputManager::POWER_BUTTON_PIN, ESP_GPIO_WAKEUP_GPIO_LOW);
-
   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
+  waitForPowerRelease();
   // Enter Deep Sleep
   esp_deep_sleep_start();
 }
@@ -154,6 +159,7 @@ void onGoHome() {
 }
 
 void setup() {
+  t1 = millis();
   Serial.begin(115200);
 
   Serial.printf("[%lu] [   ] Starting CrossPoint version " CROSSPOINT_VERSION "\n", millis());
@@ -231,7 +237,7 @@ void loop() {
     return;
   }
 
-  if (inputManager.wasReleased(InputManager::BTN_POWER) &&
+  if (inputManager.isPressed(InputManager::BTN_POWER) &&
       inputManager.getHeldTime() > SETTINGS.getPowerButtonDuration()) {
     enterDeepSleep();
     // This should never be hit as `enterDeepSleep` calls esp_deep_sleep_start

src/network/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/FilesPageHtml.generated.h"
-#include "html/FilesPageFooterHtml.generated.h"
-#include "html/FilesPageHeaderHtml.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]);
+constexpr 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;
-}
-
 }  // 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("/", HTTP_GET, [this] { handleRoot(); });
-  server->on("/status", HTTP_GET, [this]() { handleStatus(); });
+  server->on("/files", HTTP_GET, [this] { handleFileList(); });
-  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.reset();
-  server = nullptr;
-
   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() {
+void CrossPointWebServer::handleRoot() const {
-  String html = HomePageHtml;
+  server->send(200, "text/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);
   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) {
+void CrossPointWebServer::scanFiles(const char* path, const std::function<void(FileInfo)>& callback) const {
-  std::vector<FileInfo> files;
-
   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) {
+bool CrossPointWebServer::isEpubFile(const String& filename) const {
-  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) {
   String lower = filename;
   lower.toLowerCase();
   return lower.endsWith(".epub");
 }
 
-void CrossPointWebServer::handleFileList() {
+void CrossPointWebServer::handleFileList() const { server->send(200, "text/html", FilesPageHtml); }
-  String html = FilesPageHeaderHtml;
 
+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
+  server->setContentLength(CONTENT_LENGTH_UNKNOWN);
-  if (server->hasArg("msg")) {
+  server->send(200, "application/json", "");
-    String msg = escapeHtml(server->arg("msg"));
+  server->sendContent("[");
-    String msgType = server->hasArg("type") ? escapeHtml(server->arg("type")) : "success";
+  char output[512];
-    html += "<div class=\"message " + msgType + "\">" + msg + "</div>";
+  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
+    if (seenFirst) {
-  html += "<input type=\"hidden\" id=\"currentPath\" value=\"" + currentPath + "\">";
+      server->sendContent(",");
-
-  // 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++;
     } else {
-      if (file.isEpub) epubCount++;
+      seenFirst = true;
-      totalSize += file.size;
     }
-  }
+    server->sendContent(output);
-
+  });
-  // Page header with inline breadcrumb and action buttons
+  server->sendContent("]");
-  html += "<div class=\"page-header\">";
+  // End of streamed response, empty chunk to signal client
-  html += "<div class=\"page-header-left\">";
+  server->sendContent("");
-  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);
   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();
+      const unsigned long writeStartTime = millis();
-      size_t written = uploadFile.write(upload.buf, upload.currentSize);
+      const size_t written = uploadFile.write(upload.buf, upload.currentSize);
-      unsigned long writeEndTime = millis();
+      const unsigned long writeEndTime = millis();
-      unsigned long writeDuration = writeEndTime - writeStartTime;
+      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;
+          const unsigned long timeSinceStart = millis() - uploadStartTime;
-          unsigned long timeSinceLastWrite = millis() - lastWriteTime;
+          const unsigned long timeSinceLastWrite = millis() - lastWriteTime;
-          float kbps = (uploadSize / 1024.0) / (timeSinceStart / 1000.0);
+          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(".")) {

src/network/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 = "/");
+  void scanFiles(const char* path, const std::function<void(FileInfo)>& callback) const;
-  String formatFileSize(size_t bytes);
+  String formatFileSize(size_t bytes) const;
-  bool isEpubFile(const String& filename);
+  bool isEpubFile(const String& filename) const;
 
   // Request handlers
-  void handleRoot();
+  void handleRoot() const;
-  void handleNotFound();
+  void handleNotFound() const;
-  void handleStatus();
+  void handleStatus() const;
-  void handleFileList();
+  void handleFileList() const;
-  void handleUpload();
+  void handleFileListData() const;
-  void handleUploadPost();
+  void handleUpload() const;
-  void handleCreateFolder();
+  void handleUploadPost() const;
-  void handleDelete();
+  void handleCreateFolder() const;
+  void handleDelete() const;
 };

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>

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>