From ebb0ccecf4dc81233d117ddb9e7cceae454c48e9 Mon Sep 17 00:00:00 2001
From: Patedam <pgillen.pro@gmail.com>
Date: Sun, 15 Mar 2026 14:47:32 -0400
Subject: [PATCH] Moved to lvgl 9.4 because 9.5 has removed runtime xml
 support. Made basic example of editing xml layout from backend.

---
 Provider/dependencies.lock                    |   6 +-
 .../frontend/src/lib/DeviceManager.svelte     |  72 ++++++--
 Provider/frontend/src/lib/api.js              |  18 ++
 Provider/frontend/version.json                |   2 +-
 Provider/main/api/devices/layout.cpp          |   8 +-
 Provider/main/api/devices/list.cpp            |   1 +
 Provider/main/api/devices/register.cpp        |   6 +-
 Provider/main/api/devices/screen_image.cpp    | 155 ++++++++++++++----
 Provider/main/api/devices/store.cpp           |   2 +-
 Provider/main/device.hpp                      |   6 +
 Provider/main/idf_component.yml               |   2 +-
 Provider/sdkconfig.defaults                   |   8 +-
 Provider/tdd/device_screens.md                |   8 +
 13 files changed, 236 insertions(+), 58 deletions(-)

diff --git a/Provider/dependencies.lock b/Provider/dependencies.lock
index 85ce0b5..d8ce71e 100644
--- a/Provider/dependencies.lock
+++ b/Provider/dependencies.lock
@@ -146,12 +146,12 @@ dependencies:
       type: service
     version: 1.20.4
   lvgl/lvgl:
-    component_hash: 184e532558c1c45fefed631f3e235423d22582aafb4630f3e8885c35281a49ae
+    component_hash: 17e68bfd21f0edf4c3ee838e2273da840bf3930e5dbc3bfa6c1190c3aed41f9f
     dependencies: []
     source:
       registry_url: https://components.espressif.com/
       type: service
-    version: 9.5.0
+    version: 9.4.0
 direct_dependencies:
 - espressif/ethernet_init
 - espressif/led_strip
@@ -159,6 +159,6 @@ direct_dependencies:
 - idf
 - joltwallet/littlefs
 - lvgl/lvgl
-manifest_hash: 96112412d371d78cc527b7d0904042e5a7ca7c4f25928de9483a1b53dd2a2f4e
+manifest_hash: 0c7ea64d32655d6be4f726b7946e96626bce0de88c2dc8f091bb5e365d26a374
 target: esp32s3
 version: 2.0.0
diff --git a/Provider/frontend/src/lib/DeviceManager.svelte b/Provider/frontend/src/lib/DeviceManager.svelte
index 088a944..75521c0 100644
--- a/Provider/frontend/src/lib/DeviceManager.svelte
+++ b/Provider/frontend/src/lib/DeviceManager.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getDevices, updateDeviceLayout } from './api.js';
+  import { getDevices, updateDeviceLayout, registerDevice } from './api.js';
 
   let devices = $state([]);
   let loading = $state(true);
@@ -10,6 +10,11 @@
   let savingMac = $state('');
   let saveResult = $state('');
 
+  const DEFAULT_XML = `<lv_obj width="100%" height="100%" flex_flow="column" align="center" style_pad_row="10">\n    <lv_label text="Hello World" />\n    <lv_label bind_text="device_mac" />\n</lv_obj>`;
+
+  // Debug states
+  let debugRegistering = $state(false);
+
   async function loadDevices() {
     loading = true;
     error = '';
@@ -22,11 +27,26 @@
     }
   }
 
-  async function handleSaveLayout(mac) {
-    savingMac = mac;
+  async function handleDebugRegister() {
+    debugRegistering = true;
+    try {
+      // Generate a fake MAC like "DE:BU:G0:xx:xx:xx"
+      const hex = () => Math.floor(Math.random() * 256).toString(16).padStart(2, '0').toUpperCase();
+      const fakeMac = `DE:BU:G0:${hex()}:${hex()}:${hex()}`;
+      await registerDevice(fakeMac);
+      await loadDevices();
+    } catch (e) {
+      error = e.message || 'Failed to register debug device';
+    } finally {
+      debugRegistering = false;
+    }
+  }
+
+  async function handleSaveLayout(device) {
+    savingMac = device.mac;
     saveResult = '';
     try {
-      await updateDeviceLayout(mac, editingXml[mac] || '');
+      await updateDeviceLayout(device.mac, editingXml[device.mac] ?? device.xml_layout);
       saveResult = 'ok';
       await loadDevices();
     } catch (e) {
@@ -87,9 +107,15 @@
             </div>
             <div class="flex items-center gap-2">
               {#if device.has_layout}
-                <span class="text-[10px] bg-success/20 text-success px-2 py-0.5 rounded-full uppercase tracking-wider font-semibold">
-                  Layout Set
-                </span>
+                {#if device.xml_layout === DEFAULT_XML}
+                  <span class="text-[10px] bg-accent/20 text-accent px-2 py-0.5 rounded-full uppercase tracking-wider font-semibold">
+                    Default Layout
+                  </span>
+                {:else}
+                  <span class="text-[10px] bg-success/20 text-success px-2 py-0.5 rounded-full uppercase tracking-wider font-semibold">
+                    Layout Set
+                  </span>
+                {/if}
               {:else}
                 <span class="text-[10px] bg-border/50 text-text-secondary px-2 py-0.5 rounded-full uppercase tracking-wider font-semibold">
                   No Layout
@@ -100,20 +126,20 @@
 
           <!-- XML Editor -->
           <div class="p-5 space-y-3">
-            <label class="text-xs font-semibold text-text-secondary uppercase tracking-wider">
+            <label for="xml-{device.mac}" class="text-xs font-semibold text-text-secondary uppercase tracking-wider">
               LVGL XML Layout
             </label>
             <!-- svelte-ignore a11y_autofocus -->
             <textarea
+              id="xml-{device.mac}"
               class="w-full h-32 bg-bg-primary border border-border rounded-lg p-3 text-xs font-mono text-text-primary resize-y focus:border-accent focus:outline-none transition-colors placeholder:text-text-secondary/50"
-              placeholder='<lv_label text="Hello World" align="center" />'
-              value={editingXml[device.mac] ?? ''}
+              placeholder={DEFAULT_XML}
+              value={editingXml[device.mac] ?? device.xml_layout}
               oninput={(e) => editingXml[device.mac] = e.target.value}
             ></textarea>
 
             <div class="flex items-center justify-between">
               <div class="flex items-center gap-2">
-                {#if device.has_layout}
                   <a
                     href="/api/devices/screen.png?mac={device.mac}"
                     target="_blank"
@@ -121,10 +147,9 @@
                   >
                     Preview PNG →
                   </a>
-                {/if}
               </div>
               <button
-                onclick={() => handleSaveLayout(device.mac)}
+                onclick={() => handleSaveLayout(device)}
                 disabled={savingMac === device.mac}
                 class="px-4 py-2 text-xs font-medium rounded-lg transition-colors
                        bg-accent/10 text-accent border border-accent/20
@@ -145,4 +170,25 @@
       {/each}
     </div>
   {/if}
+
+  <details class="mt-8 border text-xs border-border rounded-lg bg-bg-card opacity-50 hover:opacity-100 transition-opacity">
+    <summary class="px-4 py-3 cursor-pointer font-medium text-text-secondary select-none">
+      Debug Tools
+    </summary>
+    <div class="p-4 border-t border-border border-dashed space-y-4">
+      <p class="text-text-secondary">
+        Quickly register a new device to format layouts.
+      </p>
+      <button
+        onclick={handleDebugRegister}
+        disabled={debugRegistering}
+        class="px-4 py-2 font-medium rounded-lg transition-colors
+               bg-accent/10 text-accent border border-accent/20
+               hover:bg-accent/20 hover:border-accent/30
+               disabled:opacity-40 disabled:cursor-not-allowed"
+      >
+        {debugRegistering ? 'Registering...' : 'Add Fake Device'}
+      </button>
+    </div>
+  </details>
 </div>
diff --git a/Provider/frontend/src/lib/api.js b/Provider/frontend/src/lib/api.js
index fb3e5f9..b6a9123 100644
--- a/Provider/frontend/src/lib/api.js
+++ b/Provider/frontend/src/lib/api.js
@@ -287,6 +287,24 @@ export async function getDevices() {
     return res.json();
 }
 
+/**
+ * Register a new device.
+ * @param {string} mac 
+ * @returns {Promise<{status: string}>}
+ */
+export async function registerDevice(mac) {
+    const res = await trackedFetch(`${API_BASE}/api/devices/register`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ mac })
+    });
+    if (!res.ok) {
+        const errorText = await res.text();
+        throw new Error(`Failed (${res.status}): ${errorText || res.statusText}`);
+    }
+    return res.json();
+}
+
 /**
  * Update the LVGL XML layout for a device.
  * @param {string} mac
diff --git a/Provider/frontend/version.json b/Provider/frontend/version.json
index d0a7c8f..d049655 100644
--- a/Provider/frontend/version.json
+++ b/Provider/frontend/version.json
@@ -1,5 +1,5 @@
 {
   "major": 0,
   "minor": 1,
-  "revision": 30
+  "revision": 32
 }
\ No newline at end of file
diff --git a/Provider/main/api/devices/layout.cpp b/Provider/main/api/devices/layout.cpp
index f2b0403..0b4c0b3 100644
--- a/Provider/main/api/devices/layout.cpp
+++ b/Provider/main/api/devices/layout.cpp
@@ -60,14 +60,14 @@ internal esp_err_t api_devices_layout_handler(httpd_req_t *req)
   cJSON *mac_item = cJSON_GetObjectItem(body, "mac");
   cJSON *xml_item = cJSON_GetObjectItem(body, "xml");
 
-  if (!cJSON_IsString(mac_item) || strlen(mac_item->valuestring) == 0)
+  if (!cJSON_IsString(mac_item) || !mac_item->valuestring || strlen(mac_item->valuestring) == 0)
   {
     cJSON_Delete(body);
     httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Missing 'mac'");
     return ESP_FAIL;
   }
 
-  if (!cJSON_IsString(xml_item))
+  if (!cJSON_IsString(xml_item) || !xml_item->valuestring)
   {
     cJSON_Delete(body);
     httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Missing 'xml'");
@@ -75,10 +75,10 @@ internal esp_err_t api_devices_layout_handler(httpd_req_t *req)
   }
 
   bool ok = update_device_layout(mac_item->valuestring, xml_item->valuestring);
-  cJSON_Delete(body);
 
   if (!ok)
   {
+    cJSON_Delete(body);
     httpd_resp_send_err(req, HTTPD_404_NOT_FOUND, "Device not found");
     return ESP_FAIL;
   }
@@ -86,6 +86,8 @@ internal esp_err_t api_devices_layout_handler(httpd_req_t *req)
   ESP_LOGI(kTagDeviceLayout, "Updated layout for %s (%zu bytes)", mac_item->valuestring,
            strlen(xml_item->valuestring));
 
+  cJSON_Delete(body);
+
   httpd_resp_sendstr(req, "{\"status\":\"ok\"}");
   return ESP_OK;
 }
diff --git a/Provider/main/api/devices/list.cpp b/Provider/main/api/devices/list.cpp
index 40a2fd0..bcef436 100644
--- a/Provider/main/api/devices/list.cpp
+++ b/Provider/main/api/devices/list.cpp
@@ -20,6 +20,7 @@ internal esp_err_t api_devices_get_handler(httpd_req_t *req)
       cJSON *obj = cJSON_CreateObject();
       cJSON_AddStringToObject(obj, "mac", g_Devices[i].mac);
       cJSON_AddBoolToObject(obj, "has_layout", g_Devices[i].xml_layout[0] != '\0');
+      cJSON_AddStringToObject(obj, "xml_layout", g_Devices[i].xml_layout);
       cJSON_AddItemToArray(arr, obj);
     }
   }
diff --git a/Provider/main/api/devices/register.cpp b/Provider/main/api/devices/register.cpp
index 1aa82c8..10d8697 100644
--- a/Provider/main/api/devices/register.cpp
+++ b/Provider/main/api/devices/register.cpp
@@ -32,7 +32,7 @@ internal esp_err_t api_devices_register_handler(httpd_req_t *req)
   }
 
   cJSON *mac_item = cJSON_GetObjectItem(body, "mac");
-  if (!cJSON_IsString(mac_item) || strlen(mac_item->valuestring) == 0)
+  if (!cJSON_IsString(mac_item) || !mac_item->valuestring || strlen(mac_item->valuestring) == 0)
   {
     cJSON_Delete(body);
     httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Missing 'mac'");
@@ -41,10 +41,10 @@ internal esp_err_t api_devices_register_handler(httpd_req_t *req)
 
   bool was_new = false;
   device_t *dev = register_device(mac_item->valuestring, &was_new);
-  cJSON_Delete(body);
 
   if (!dev)
   {
+    cJSON_Delete(body);
     httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Device limit reached");
     return ESP_FAIL;
   }
@@ -61,6 +61,8 @@ internal esp_err_t api_devices_register_handler(httpd_req_t *req)
   }
   cJSON_AddStringToObject(resp, "mac", dev->mac);
 
+  cJSON_Delete(body);
+
   const char *json = cJSON_PrintUnformatted(resp);
   httpd_resp_sendstr(req, json);
 
diff --git a/Provider/main/api/devices/screen_image.cpp b/Provider/main/api/devices/screen_image.cpp
index 8423c43..fa03e7a 100644
--- a/Provider/main/api/devices/screen_image.cpp
+++ b/Provider/main/api/devices/screen_image.cpp
@@ -1,24 +1,26 @@
-// GET /api/devices/screen.png?mac=XX — Render and return a PNG for the device's current screen
-// Uses LVGL to render the device's XML layout (or a fallback label) then encodes to PNG via lodepng.
+// GET /api/devices/screen.png?mac=XX — Render and return a PNG for the device's
+// current screen Uses LVGL to render the device's XML layout (or a fallback
+// label) then encodes to PNG via lodepng.
 
-#include "lv_setup.hpp"
-#include "lodepng/lodepng.h"
+#include "esp_heap_caps.h"
 #include "esp_http_server.h"
 #include "esp_log.h"
-#include "esp_heap_caps.h"
+#include "lodepng/lodepng.h"
+#include "lodepng_alloc.hpp"
+#include "lv_setup.hpp"
 #include "lvgl.h"
 #include <string.h>
-#include "lodepng_alloc.hpp"
 
-#include "types.hpp"
 #include "device.hpp"
+#include "types.hpp"
 
 internal const char *kTagDeviceScreenImage = "API_DEV_SCREEN_IMG";
 
 internal esp_err_t api_devices_screen_image_handler(httpd_req_t *req)
 {
   httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
-  httpd_resp_set_hdr(req, "Cache-Control", "no-cache, no-store, must-revalidate");
+  httpd_resp_set_hdr(req, "Cache-Control",
+                     "no-cache, no-store, must-revalidate");
   httpd_resp_set_type(req, "image/png");
 
   // Extract mac query parameter
@@ -35,7 +37,8 @@ internal esp_err_t api_devices_screen_image_handler(httpd_req_t *req)
 
   if (mac[0] == '\0')
   {
-    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Missing 'mac' query param");
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST,
+                        "Missing 'mac' query param");
     return ESP_FAIL;
   }
 
@@ -62,23 +65,108 @@ internal esp_err_t api_devices_screen_image_handler(httpd_req_t *req)
   // White background for grayscale
   lv_obj_set_style_bg_color(scr, lv_color_white(), LV_PART_MAIN);
 
-  if (dev->xml_layout[0] != '\0')
+  // Setup the MAC address subject so the XML can bind to it
+  static lv_subject_t mac_subject;
+  // Two buffers are needed by LVGL for string observers (current and previous)
+  static char mac_buf[18];
+  static char mac_prev_buf[18];
+
+  strncpy(mac_buf, mac, sizeof(mac_buf));
+  strncpy(mac_prev_buf, mac, sizeof(mac_prev_buf));
+
+  lv_subject_init_string(&mac_subject, mac_buf, mac_prev_buf, sizeof(mac_buf),
+                         mac);
+
+  // Register the subject in the global XML scope under the name "device_mac"
+  lv_xml_component_scope_t *global_scope =
+      lv_xml_component_get_scope("globals");
+  if (global_scope)
   {
-    // TODO: Use lv_xml_create() when LVGL XML runtime is verified working.
-    // For now, show the XML as text to prove the pipeline works end to end.
-    // Once we confirm LV_USE_XML compiles, we'll swap this for the real XML parser.
-    lv_obj_t *label = lv_label_create(scr);
-    lv_label_set_text(label, dev->xml_layout);
-    lv_obj_set_style_text_color(label, lv_color_black(), LV_PART_MAIN);
-    lv_obj_align(label, LV_ALIGN_TOP_LEFT, 10, 10);
+    lv_xml_register_subject(global_scope, "device_mac", &mac_subject);
+    ESP_LOGI(kTagDeviceScreenImage,
+             "Registered subject 'device_mac' with value: %s", mac);
+  }
+
+  bool render_success = false;
+
+  // 1. Wrap the payload in a <component><view> if it's missing (LVGL 9.4
+  // requirement for register_component_from_data)
+  char xml_buffer[2500];
+  const char *xml_to_register = (const char *)dev->xml_layout;
+
+  if (strstr(xml_to_register, "<view") == NULL &&
+      strstr(xml_to_register, "<screen") == NULL)
+  {
+    snprintf(xml_buffer, sizeof(xml_buffer),
+             "<component>\n<view width=\"100%%\" "
+             "height=\"100%%\">\n%s\n</view>\n</component>",
+             dev->xml_layout);
+    xml_to_register = xml_buffer;
+    ESP_LOGI(kTagDeviceScreenImage,
+             "Wrapped widget XML in component/view for parsing.");
+  }
+
+  // 2. Register the XML payload as a component
+  lv_result_t res =
+      lv_xml_register_component_from_data("current_device", xml_to_register);
+
+  if (res == LV_RESULT_OK)
+  {
+    ESP_LOGI(kTagDeviceScreenImage, "Successfully registered XML for device %s",
+             mac);
+
+    // 3. Determine if this XML describes a full <screen> or just a <component>
+    // layout Simple heuristic: check if the string contains "<screen"
+    if (strstr(xml_to_register, "<screen") != NULL)
+    {
+      ESP_LOGI(kTagDeviceScreenImage,
+               "XML contains <screen>, creating screen instance");
+      lv_obj_t *new_scr = lv_xml_create_screen("current_device");
+
+      if (new_scr)
+      {
+        // We must load this newly created screen to make it active before
+        // rendering
+        lv_screen_load(new_scr);
+        scr = new_scr; // Update local pointer since active screen changed
+        render_success = true;
+      }
+      else
+      {
+        ESP_LOGE(kTagDeviceScreenImage,
+                 "lv_xml_create_screen failed for device %s", mac);
+      }
+    }
+    else
+    {
+      ESP_LOGI(kTagDeviceScreenImage,
+               "XML is a component/widget, creating on active screen");
+      // Create the component directly on the currently active cleaned screen
+      lv_obj_t *comp = (lv_obj_t *)lv_xml_create(scr, "current_device", NULL);
+      if (comp)
+      {
+        render_success = true;
+      }
+      else
+      {
+        ESP_LOGE(kTagDeviceScreenImage, "lv_xml_create failed for device %s",
+                 mac);
+      }
+    }
   }
   else
   {
-    // Fallback: render "Hello <mac>"
+    ESP_LOGE(kTagDeviceScreenImage,
+             "lv_xml_register_component_from_data failed for device %s", mac);
+  }
+
+  // 3. Fallback if LVGL XML parsing or creation failed
+  if (!render_success)
+  {
+    ESP_LOGW(kTagDeviceScreenImage,
+             "XML render failed, falling back to raw text layout");
     lv_obj_t *label = lv_label_create(scr);
-    char text[48];
-    snprintf(text, sizeof(text), "Hello %s", mac);
-    lv_label_set_text(label, text);
+    lv_label_set_text(label, "XML Parsing Error\nSee serial log");
     lv_obj_set_style_text_color(label, lv_color_black(), LV_PART_MAIN);
     lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
   }
@@ -91,7 +179,8 @@ internal esp_err_t api_devices_screen_image_handler(httpd_req_t *req)
   {
     xSemaphoreGive(g_LvglMutex);
     ESP_LOGE(kTagDeviceScreenImage, "No active draw buffer");
-    httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Display uninitialized");
+    httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR,
+                        "Display uninitialized");
     return ESP_FAIL;
   }
 
@@ -104,12 +193,14 @@ internal esp_err_t api_devices_screen_image_handler(httpd_req_t *req)
 
   if (draw_buf->header.stride != width)
   {
-    packed_data = (uint8_t *)heap_caps_malloc(width * height, MALLOC_CAP_SPIRAM);
+    packed_data =
+        (uint8_t *)heap_caps_malloc(width * height, MALLOC_CAP_SPIRAM);
     if (!packed_data)
     {
       xSemaphoreGive(g_LvglMutex);
       ESP_LOGE(kTagDeviceScreenImage, "Failed to allocate packed buffer");
-      httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Out of memory");
+      httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR,
+                          "Out of memory");
       return ESP_FAIL;
     }
     needs_free = true;
@@ -126,8 +217,10 @@ internal esp_err_t api_devices_screen_image_handler(httpd_req_t *req)
 
   lodepng_allocator_reset();
 
-  ESP_LOGI(kTagDeviceScreenImage, "Encoding %lux%lu PNG for device %s", width, height, mac);
-  unsigned error = lodepng_encode_memory(&png, &pngsize, packed_data, width, height, LCT_GREY, 8);
+  ESP_LOGI(kTagDeviceScreenImage, "Encoding %lux%lu PNG for device %s", width,
+           height, mac);
+  unsigned error = lodepng_encode_memory(&png, &pngsize, packed_data, width,
+                                         height, LCT_GREY, 8);
 
   if (needs_free)
   {
@@ -138,15 +231,17 @@ internal esp_err_t api_devices_screen_image_handler(httpd_req_t *req)
 
   if (error)
   {
-    ESP_LOGE(kTagDeviceScreenImage, "PNG encoding error %u: %s", error, lodepng_error_text(error));
-    httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "PNG generation failed");
+    ESP_LOGE(kTagDeviceScreenImage, "PNG encoding error %u: %s", error,
+             lodepng_error_text(error));
+    httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR,
+                        "PNG generation failed");
     return ESP_FAIL;
   }
 
   ESP_LOGI(kTagDeviceScreenImage, "PNG ready: %zu bytes. Sending...", pngsize);
-  esp_err_t res = httpd_resp_send(req, (const char *)png, pngsize);
+  esp_err_t sendRes = httpd_resp_send(req, (const char *)png, pngsize);
 
-  return res;
+  return sendRes;
 }
 
 internal const httpd_uri_t api_devices_screen_image_uri = {
diff --git a/Provider/main/api/devices/store.cpp b/Provider/main/api/devices/store.cpp
index e1d5c85..ed4f28e 100644
--- a/Provider/main/api/devices/store.cpp
+++ b/Provider/main/api/devices/store.cpp
@@ -35,7 +35,7 @@ internal device_t *register_device(const char *mac, bool *was_new)
     {
       strlcpy(g_Devices[i].mac, mac, sizeof(g_Devices[i].mac));
       g_Devices[i].active = true;
-      g_Devices[i].xml_layout[0] = '\0';
+      strlcpy(g_Devices[i].xml_layout, kDefaultLayoutXml, sizeof(g_Devices[i].xml_layout));
       *was_new = true;
       return &g_Devices[i];
     }
diff --git a/Provider/main/device.hpp b/Provider/main/device.hpp
index 31e0aff..4289a80 100644
--- a/Provider/main/device.hpp
+++ b/Provider/main/device.hpp
@@ -7,6 +7,12 @@
 constexpr int MAX_DEVICES = 8;
 constexpr int DEVICE_XML_MAX = 2048;
 
+constexpr char kDefaultLayoutXml[] = 
+    "<lv_obj width=\"800\" height=\"480\" flex_flow=\"column\" flex_main_place=\"center\" flex_cross_place=\"center\" style_pad_row=\"10\">\n"
+    "    <lv_label text=\"Hello World\" />\n"
+    "    <lv_label bind_text=\"device_mac\" />\n"
+    "</lv_obj>";
+
 struct device_t
 {
   char mac[18];               // "AA:BB:CC:DD:EE:FF\0"
diff --git a/Provider/main/idf_component.yml b/Provider/main/idf_component.yml
index e652c64..8943f88 100644
--- a/Provider/main/idf_component.yml
+++ b/Provider/main/idf_component.yml
@@ -18,4 +18,4 @@ dependencies:
   espressif/mdns: ^1.4.1
   espressif/ethernet_init: ^1.3.0
   joltwallet/littlefs: "^1.20"  # https://github.com/joltwallet/esp_littlefs
-  lvgl/lvgl: "^9.2.0"
+  lvgl/lvgl: "9.4.0"
diff --git a/Provider/sdkconfig.defaults b/Provider/sdkconfig.defaults
index 6a9ada5..f466c57 100644
--- a/Provider/sdkconfig.defaults
+++ b/Provider/sdkconfig.defaults
@@ -27,7 +27,6 @@ CONFIG_ETHERNET_SPI_POLLING0_MS=0
 
 # Enable PSRAM
 CONFIG_SPIRAM=y
-CONFIG_ESP32S3_SPIRAM_SUPPORT=y
 CONFIG_SPIRAM_MODE_OCT=y
 CONFIG_SPIRAM_SPEED_80M=y
 CONFIG_SPIRAM_FETCH_INSTRUCTIONS=y
@@ -36,6 +35,7 @@ CONFIG_SPIRAM_RODATA=y
 # LVGL Configuration
 CONFIG_LV_COLOR_DEPTH_8=y
 CONFIG_LV_USE_SYSMON=n
+CONFIG_LV_USE_OBJ_NAME=y
 
 # LVGL Memory Allocator (Use ESP-IDF Heap instead of internal 64kB BSS pool!)
 CONFIG_LV_USE_BUILTIN_MALLOC=n
@@ -52,7 +52,6 @@ CONFIG_LV_BUILD_DEMOS=n
 
 # Disable unused software drawing color formats (Only L8 and A8 matter for grayscale)
 CONFIG_LV_DRAW_SW_SUPPORT_RGB565=n
-CONFIG_LV_DRAW_SW_SUPPORT_RGB565_SWAPPED=n
 CONFIG_LV_DRAW_SW_SUPPORT_RGB565A8=n
 CONFIG_LV_DRAW_SW_SUPPORT_RGB888=n
 CONFIG_LV_DRAW_SW_SUPPORT_XRGB8888=n
@@ -78,13 +77,13 @@ CONFIG_LV_USE_SPINBOX=n
 CONFIG_LV_USE_SPINNER=n
 CONFIG_LV_USE_KEYBOARD=n
 CONFIG_LV_USE_CALENDAR=n
-CONFIG_LV_USE_CHECKBOX=n
+CONFIG_LV_USE_CHECKBOX=y
 CONFIG_LV_USE_DROPDOWN=n
 CONFIG_LV_USE_IMAGEBUTTON=n
 CONFIG_LV_USE_ROLLER=n
 CONFIG_LV_USE_SCALE=n
 CONFIG_LV_USE_SLIDER=n
-CONFIG_LV_USE_SWITCH=n
+CONFIG_LV_USE_SWITCH=y
 CONFIG_LV_USE_TEXTAREA=n
 CONFIG_LV_USE_TABLE=n
 
@@ -99,3 +98,4 @@ CONFIG_LV_USE_OBSERVER=n
 
 # Enable XML runtime for dynamic screen layouts (LVGL 9.4+)
 CONFIG_LV_USE_XML=y
+CONFIG_LV_USE_OBSERVER=y
diff --git a/Provider/tdd/device_screens.md b/Provider/tdd/device_screens.md
index 0c29aad..a2bdaa7 100644
--- a/Provider/tdd/device_screens.md
+++ b/Provider/tdd/device_screens.md
@@ -53,7 +53,15 @@ The following REST endpoints handle the device lifecycle and image generation:
 ### Subsystems Config
 The ESP-IDF project configuration (`sdkconfig.defaults`) must be modified to enable the `CONFIG_LV_USE_XML=y` flag, which compiles the LVGL XML parser component into the firmware image.
 
+### XML Runtime Integration
+The user provided documentation for the `LV_USE_XML` runtime feature. We must:
+1. Call `lv_xml_register_component_from_data("current_device", dev->xml_layout)` to register the XML payload.
+2. Check if the XML string contains `<screen>`. If it does, LVGL expects us to instantiate it as a full screen using `lv_obj_t * root = lv_xml_create_screen("current_device");`.
+3. If it does not contain `<screen>`, it's just a regular component/widget, so we create it *on* the active screen using `lv_obj_t * root = lv_xml_create(scr, "current_device", NULL);`.
+4. Fallback to a string label if the XML is empty or parsing fails.
+
 ### Frontend
 - **DeviceManager.svelte:** A new component accessible from the Sidebar. It fetches the device list on load.
 - **XML Uploading:** For each device card, a text area allows the user to paste an LVGL XML string. Clicking "Save Layout" updates the device via `POST /api/devices/layout`.
+- **Debug Features:** A collapsed section (e.g. `<details>`) in the UI will contain a button to "Register Debug Device" that triggers a POST to `/api/devices/register` with a random or hardcoded MAC (e.g., `00:11:22:33:44:55`).
 - **Integration:** The `App.svelte` router will be updated to include the `'devices'` view state alongside Dashboard, Tasks, and Users.