Last few tweaks

Made basic example of editing xml layout from backend.

.gitignore

@@ -95,4 +95,7 @@ external/*
 Provider/AgentTasks/
 
 # OTA files
-*.bundle
+*.bundle
+
+#png
+*.png

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

Provider/fetch_png.py

@@ -0,0 +1,20 @@
+import urllib.request
+import json
+import time
+
+# 1. Register a fake device
+req = urllib.request.Request('http://calendink.local/api/devices/register', data=json.dumps({'mac': 'DE:BU:G0:44:55:66'}).encode('utf-8'), headers={'Content-Type': 'application/json'})
+try:
+    with urllib.request.urlopen(req) as response:
+        print("Registered:", response.read().decode())
+except Exception as e:
+    print("Error registering:", e)
+
+time.sleep(1)
+
+# 2. Download the PNG
+try:
+    urllib.request.urlretrieve('http://calendink.local/api/devices/screen.png?mac=DE:BU:G0:44:55:66', 'test_png.png')
+    print("Downloaded test_png.png")
+except Exception as e:
+    print("Error downloading PNG:", e)

Provider/frontend/src/App.svelte

@@ -5,6 +5,7 @@
   import Sidebar from "./lib/Sidebar.svelte";
   import TaskManager from "./lib/TaskManager.svelte";
   import UserManager from "./lib/UserManager.svelte";
+  import DeviceManager from "./lib/DeviceManager.svelte";
   import Spinner from "./lib/Spinner.svelte";
 
   /** @type {'loading' | 'ok' | 'error' | 'rebooting'} */
@@ -13,7 +14,7 @@
   let showRebootConfirm = $state(false);
   let isRecovering = $state(false);
 
-  /** @type {'dashboard' | 'tasks' | 'users'} */
+  /** @type {'dashboard' | 'tasks' | 'users' | 'devices'} */
   let currentView = $state("dashboard");
   let mobileMenuOpen = $state(false);
 
@@ -352,6 +353,11 @@
         <div class="bg-bg-card border border-border rounded-xl p-8 shadow-xl">
           <UserManager mode="manager" />
         </div>
+      {:else if currentView === 'devices'}
+        <!-- Device Management View -->
+        <div class="bg-bg-card border border-border rounded-xl p-6 shadow-xl">
+          <DeviceManager />
+        </div>
       {/if}
 
       <!-- Reboot Confirmation Modal -->

Provider/frontend/src/lib/DeviceManager.svelte

@@ -0,0 +1,196 @@
+<script>
+  import { getDevices, updateDeviceLayout, registerDevice } from './api.js';
+
+  let devices = $state([]);
+  let loading = $state(true);
+  let error = $state('');
+
+  // Track XML edits per device (keyed by MAC)
+  let editingXml = $state({});
+  let savingMac = $state('');
+  let saveResult = $state('');
+
+  let defaultXml = $state('');
+
+  // Debug states
+  let debugRegistering = $state(false);
+
+  async function loadDevices() {
+    loading = true;
+    error = '';
+    try {
+      const data = await getDevices();
+      devices = data.devices;
+      defaultXml = data.default_layout;
+    } catch (e) {
+      error = e.message || 'Failed to load devices';
+    } finally {
+      loading = false;
+    }
+  }
+
+  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(device.mac, editingXml[device.mac] ?? device.xml_layout);
+      saveResult = 'ok';
+      await loadDevices();
+    } catch (e) {
+      saveResult = e.message || 'Save failed';
+    } finally {
+      savingMac = '';
+    }
+  }
+
+  // Runs once on mount — no reactive deps
+  $effect(() => {
+    loadDevices();
+  });
+</script>
+
+<div class="space-y-6">
+  <div class="flex items-center justify-between">
+    <div>
+      <h2 class="text-lg font-bold text-text-primary">Device Manager</h2>
+      <p class="text-xs text-text-secondary mt-1">
+        Manage registered e-ink devices and their screen layouts.
+      </p>
+    </div>
+    <button
+      onclick={loadDevices}
+      class="px-3 py-1.5 text-xs font-medium rounded-lg bg-accent/10 text-accent border border-accent/20 hover:bg-accent/20 transition-colors"
+    >
+      Refresh
+    </button>
+  </div>
+
+  {#if loading}
+    <div class="text-center text-sm text-text-secondary py-8 animate-pulse">
+      Loading devices...
+    </div>
+  {:else if error}
+    <div class="text-center text-sm text-danger py-8">
+      {error}
+    </div>
+  {:else if devices.length === 0}
+    <div class="bg-bg-card-hover/50 border border-border rounded-xl p-8 text-center">
+      <p class="text-text-secondary text-sm">No devices registered yet.</p>
+      <p class="text-text-secondary text-xs mt-2">
+        Use <code class="bg-bg-card px-1.5 py-0.5 rounded text-[11px] font-mono text-accent">
+          curl -X POST -d '{{"mac":"AA:BB:CC:DD:EE:FF"}}' http://calendink.local/api/devices/register
+        </code> to register a device.
+      </p>
+    </div>
+  {:else}
+    <div class="grid grid-cols-1 gap-4">
+      {#each devices as device}
+        <div class="bg-bg-card border border-border rounded-xl overflow-hidden shadow-lg">
+          <!-- Device Header -->
+          <div class="px-5 py-3 border-b border-border flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <span class="text-base">📺</span>
+              <span class="text-sm font-mono font-bold text-text-primary">{device.mac}</span>
+            </div>
+            <div class="flex items-center gap-2">
+              {#if device.has_layout}
+                {#if device.xml_layout === defaultXml}
+                  <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
+                </span>
+              {/if}
+            </div>
+          </div>
+
+          <!-- XML Editor -->
+          <div class="p-5 space-y-3">
+            <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={defaultXml}
+              value={editingXml[device.mac] ?? device.xml_layout}
+              oninput={(e) => editingXml[device.mac] = e.currentTarget.value}
+            ></textarea>
+
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                  <a
+                    href="/api/devices/screen.png?mac={device.mac}"
+                    target="_blank"
+                    class="text-xs text-accent hover:text-accent/80 transition-colors underline"
+                  >
+                    Preview PNG →
+                  </a>
+              </div>
+              <button
+                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
+                       hover:bg-accent/20 hover:border-accent/30
+                       disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                {savingMac === device.mac ? 'Saving...' : 'Save Layout'}
+              </button>
+            </div>
+
+            {#if saveResult === 'ok' && savingMac === ''}
+              <div class="text-xs text-success">✓ Layout saved successfully</div>
+            {:else if saveResult && saveResult !== 'ok'}
+              <div class="text-xs text-danger">✗ {saveResult}</div>
+            {/if}
+          </div>
+        </div>
+      {/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>

Provider/frontend/src/lib/Sidebar.svelte

@@ -11,6 +11,7 @@
 
   const navItems = [
     { id: 'dashboard', label: 'Dashboard', icon: '🏠' },
+    { id: 'devices', label: 'Devices', icon: '📺' },
     { id: 'tasks', label: 'Tasks', icon: '📋' },
     { id: 'users', label: 'Users', icon: '👥' },
   ];

Provider/frontend/src/lib/api.js

@@ -274,3 +274,53 @@ export async function deleteTask(id) {
     }
     return res.json();
 }
+
+// ─── Device Management ───────────────────────────────────────────────────────
+
+/**
+ * Fetch all registered devices and the default layout.
+ * @returns {Promise<{default_layout: string, devices: Array<{mac: string, has_layout: boolean, xml_layout: string}>}>}
+ */
+export async function getDevices() {
+    const res = await trackedFetch(`${API_BASE}/api/devices`);
+    if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+    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
+ * @param {string} xml
+ * @returns {Promise<{status: string}>}
+ */
+export async function updateDeviceLayout(mac, xml) {
+    const res = await trackedFetch(`${API_BASE}/api/devices/layout`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ mac, xml })
+    });
+    if (!res.ok) {
+        const errorText = await res.text();
+        throw new Error(`Failed (${res.status}): ${errorText || res.statusText}`);
+    }
+    return res.json();
+}
+

Provider/frontend/version.json

@@ -1,5 +1,5 @@
 {
   "major": 0,
   "minor": 1,
-  "revision": 30
+  "revision": 32
 }

Provider/main/api/devices/layout.cpp

@@ -0,0 +1,99 @@
+// POST /api/devices/layout — Update the XML layout for a device
+// Body: {"mac": "AA:BB:CC:DD:EE:FF", "xml": "<lv_label .../>"}
+
+#include "cJSON.h"
+#include "esp_http_server.h"
+#include "esp_log.h"
+
+#include "types.hpp"
+#include "device.hpp"
+
+internal const char *kTagDeviceLayout = "API_DEV_LAYOUT";
+
+internal esp_err_t api_devices_layout_handler(httpd_req_t *req)
+{
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
+
+  // The XML payload can be large, so use a bigger buffer
+  // DEVICE_XML_MAX (2048) + JSON overhead for mac key etc.
+  constexpr int kBufSize = DEVICE_XML_MAX + 256;
+  char *buf = (char *)malloc(kBufSize);
+  if (!buf)
+  {
+    httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Out of memory");
+    return ESP_FAIL;
+  }
+
+  int total = 0;
+  int remaining = req->content_len;
+  if (remaining >= kBufSize)
+  {
+    free(buf);
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Payload too large");
+    return ESP_FAIL;
+  }
+
+  while (remaining > 0)
+  {
+    int received = httpd_req_recv(req, buf + total, remaining);
+    if (received <= 0)
+    {
+      free(buf);
+      httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Receive error");
+      return ESP_FAIL;
+    }
+    total += received;
+    remaining -= received;
+  }
+  buf[total] = '\0';
+
+  cJSON *body = cJSON_Parse(buf);
+  free(buf);
+
+  if (!body)
+  {
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Invalid JSON");
+    return ESP_FAIL;
+  }
+
+  cJSON *mac_item = cJSON_GetObjectItem(body, "mac");
+  cJSON *xml_item = cJSON_GetObjectItem(body, "xml");
+
+  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) || !xml_item->valuestring)
+  {
+    cJSON_Delete(body);
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Missing 'xml'");
+    return ESP_FAIL;
+  }
+
+  bool ok = update_device_layout(mac_item->valuestring, xml_item->valuestring);
+
+  if (!ok)
+  {
+    cJSON_Delete(body);
+    httpd_resp_send_err(req, HTTPD_404_NOT_FOUND, "Device not found");
+    return ESP_FAIL;
+  }
+
+  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;
+}
+
+internal const httpd_uri_t api_devices_layout_uri = {
+    .uri = "/api/devices/layout",
+    .method = HTTP_POST,
+    .handler = api_devices_layout_handler,
+    .user_ctx = NULL};

Provider/main/api/devices/list.cpp

@@ -0,0 +1,45 @@
+// GET /api/devices — List all registered devices
+
+#include "cJSON.h"
+#include "esp_http_server.h"
+
+#include "types.hpp"
+#include "device.hpp"
+
+internal esp_err_t api_devices_get_handler(httpd_req_t *req)
+{
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
+
+  cJSON *root = cJSON_CreateObject();
+  cJSON_AddStringToObject(root, "default_layout", kDefaultLayoutXml);
+  
+  cJSON *arr = cJSON_CreateArray();
+  cJSON_AddItemToObject(root, "devices", arr);
+
+  for (int i = 0; i < MAX_DEVICES; i++)
+  {
+    if (g_Devices[i].active)
+    {
+      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);
+    }
+  }
+
+  const char *json = cJSON_PrintUnformatted(root);
+  httpd_resp_sendstr(req, json);
+
+  free((void *)json);
+  cJSON_Delete(root);
+
+  return ESP_OK;
+}
+
+internal const httpd_uri_t api_devices_get_uri = {
+    .uri = "/api/devices",
+    .method = HTTP_GET,
+    .handler = api_devices_get_handler,
+    .user_ctx = NULL};

Provider/main/api/devices/register.cpp

@@ -0,0 +1,79 @@
+// POST /api/devices/register — Register a new device by MAC
+// Body: {"mac": "AA:BB:CC:DD:EE:FF"}
+
+#include "cJSON.h"
+#include "esp_http_server.h"
+#include "esp_log.h"
+
+#include "types.hpp"
+#include "device.hpp"
+
+internal const char *kTagDeviceRegister = "API_DEV_REG";
+
+internal esp_err_t api_devices_register_handler(httpd_req_t *req)
+{
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
+
+  char buf[128];
+  int received = httpd_req_recv(req, buf, sizeof(buf) - 1);
+  if (received <= 0)
+  {
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Empty body");
+    return ESP_FAIL;
+  }
+  buf[received] = '\0';
+
+  cJSON *body = cJSON_Parse(buf);
+  if (!body)
+  {
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Invalid JSON");
+    return ESP_FAIL;
+  }
+
+  cJSON *mac_item = cJSON_GetObjectItem(body, "mac");
+  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;
+  }
+
+  bool was_new = false;
+  device_t *dev = register_device(mac_item->valuestring, &was_new);
+
+  if (!dev)
+  {
+    cJSON_Delete(body);
+    httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Device limit reached");
+    return ESP_FAIL;
+  }
+
+  cJSON *resp = cJSON_CreateObject();
+  if (was_new)
+  {
+    cJSON_AddStringToObject(resp, "status", "ok");
+    ESP_LOGI(kTagDeviceRegister, "Registered new device: %s", dev->mac);
+  }
+  else
+  {
+    cJSON_AddStringToObject(resp, "status", "already_registered");
+  }
+  cJSON_AddStringToObject(resp, "mac", dev->mac);
+
+  cJSON_Delete(body);
+
+  const char *json = cJSON_PrintUnformatted(resp);
+  httpd_resp_sendstr(req, json);
+
+  free((void *)json);
+  cJSON_Delete(resp);
+
+  return ESP_OK;
+}
+
+internal const httpd_uri_t api_devices_register_uri = {
+    .uri = "/api/devices/register",
+    .method = HTTP_POST,
+    .handler = api_devices_register_handler,
+    .user_ctx = NULL};

Provider/main/api/devices/screen.cpp

@@ -0,0 +1,59 @@
+// GET /api/devices/screen?mac=XX — Return the image URL for a device's current screen
+
+#include "cJSON.h"
+#include "esp_http_server.h"
+
+#include "types.hpp"
+#include "device.hpp"
+
+internal esp_err_t api_devices_screen_handler(httpd_req_t *req)
+{
+  httpd_resp_set_type(req, "application/json");
+  httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
+
+  // Extract mac query parameter
+  char mac[18] = {};
+  size_t buf_len = httpd_req_get_url_query_len(req) + 1;
+  if (buf_len > 1)
+  {
+    char query[64] = {};
+    if (httpd_req_get_url_query_str(req, query, sizeof(query)) == ESP_OK)
+    {
+      httpd_query_key_value(query, "mac", mac, sizeof(mac));
+    }
+  }
+
+  if (mac[0] == '\0')
+  {
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST, "Missing 'mac' query param");
+    return ESP_FAIL;
+  }
+
+  device_t *dev = find_device(mac);
+  if (!dev)
+  {
+    httpd_resp_send_err(req, HTTPD_404_NOT_FOUND, "Device not registered");
+    return ESP_FAIL;
+  }
+
+  // Build image_url: /api/devices/screen.png?mac=XX
+  char image_url[64];
+  snprintf(image_url, sizeof(image_url), "/api/devices/screen.png?mac=%s", mac);
+
+  cJSON *resp = cJSON_CreateObject();
+  cJSON_AddStringToObject(resp, "image_url", image_url);
+
+  const char *json = cJSON_PrintUnformatted(resp);
+  httpd_resp_sendstr(req, json);
+
+  free((void *)json);
+  cJSON_Delete(resp);
+
+  return ESP_OK;
+}
+
+internal const httpd_uri_t api_devices_screen_info_uri = {
+    .uri = "/api/devices/screen",
+    .method = HTTP_GET,
+    .handler = api_devices_screen_handler,
+    .user_ctx = NULL};

Provider/main/api/devices/screen_image.cpp

@@ -0,0 +1,239 @@
+// 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 "esp_heap_caps.h"
+#include "esp_http_server.h"
+#include "esp_log.h"
+#include "lodepng/lodepng.h"
+#include "lodepng_alloc.hpp"
+#include "lv_setup.hpp"
+#include "lvgl.h"
+#include <string.h>
+
+#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_type(req, "image/png");
+
+  // Extract mac query parameter
+  char mac[18] = {};
+  size_t buf_len = httpd_req_get_url_query_len(req) + 1;
+  if (buf_len > 1)
+  {
+    char query[64] = {};
+    if (httpd_req_get_url_query_str(req, query, sizeof(query)) == ESP_OK)
+    {
+      httpd_query_key_value(query, "mac", mac, sizeof(mac));
+    }
+  }
+
+  if (mac[0] == '\0')
+  {
+    httpd_resp_send_err(req, HTTPD_400_BAD_REQUEST,
+                        "Missing 'mac' query param");
+    return ESP_FAIL;
+  }
+
+  device_t *dev = find_device(mac);
+  if (!dev)
+  {
+    httpd_resp_send_err(req, HTTPD_404_NOT_FOUND, "Device not registered");
+    return ESP_FAIL;
+  }
+
+  // --- LVGL rendering (mutex-protected) ---
+  if (xSemaphoreTake(g_LvglMutex, pdMS_TO_TICKS(5000)) != pdTRUE)
+  {
+    ESP_LOGE(kTagDeviceScreenImage, "Failed to get LVGL mutex");
+    httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "LVGL busy");
+    return ESP_FAIL;
+  }
+
+  lv_obj_t *scr = lv_screen_active();
+
+  // Clear all children from the active screen
+  lv_obj_clean(scr);
+
+  // White background for grayscale
+  lv_obj_set_style_bg_color(scr, lv_color_white(), LV_PART_MAIN);
+
+  // 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)
+  {
+    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. Prepare the XML payload
+  const char *xml_to_register = NULL;
+  static char xml_buffer[DEVICE_XML_MAX + 100]; // static buffer to avoid stack overflow
+
+  if (dev->xml_layout[0] == '\0')
+  {
+    ESP_LOGI(kTagDeviceScreenImage, "Device %s has no layout xml.", mac);
+    return ESP_FAIL;
+  }
+
+  if (strstr(dev->xml_layout, "<screen") != NULL)
+  {
+    // The user provided a correct <screen> wrapped XML
+    xml_to_register = dev->xml_layout;
+    ESP_LOGI(kTagDeviceScreenImage,
+             "XML already contains <screen>, passing directly to parser.");
+  }
+  else
+  {
+    // Backwards compatibility for early setups - wrap it in screen and view
+    snprintf(xml_buffer, sizeof(xml_buffer),
+             "<screen>\n<view name=\"current_device\" width=\"100%%\" height=\"100%%\">\n%s\n</view>\n</screen>",
+             dev->xml_layout);
+    xml_to_register = xml_buffer;
+    ESP_LOGI(kTagDeviceScreenImage,
+             "Legacy XML without <screen> detected. Wrapped automatically.");
+  }
+
+  // 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. Since we enforce <screen> now, we always create a 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_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);
+    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);
+  }
+
+  // Force LVGL to fully render the screen
+  lv_refr_now(g_LvglDisplay);
+
+  lv_draw_buf_t *draw_buf = lv_display_get_buf_active(g_LvglDisplay);
+  if (!draw_buf)
+  {
+    xSemaphoreGive(g_LvglMutex);
+    ESP_LOGE(kTagDeviceScreenImage, "No active draw buffer");
+    httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR,
+                        "Display uninitialized");
+    return ESP_FAIL;
+  }
+
+  uint32_t width = CONFIG_CALENDINK_DISPLAY_WIDTH;
+  uint32_t height = CONFIG_CALENDINK_DISPLAY_HEIGHT;
+
+  // Handle stride != width
+  uint8_t *packed_data = (uint8_t *)draw_buf->data;
+  bool needs_free = false;
+
+  if (draw_buf->header.stride != width)
+  {
+    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");
+      return ESP_FAIL;
+    }
+    needs_free = true;
+    for (uint32_t y = 0; y < height; ++y)
+    {
+      memcpy(packed_data + (y * width),
+             (uint8_t *)draw_buf->data + (y * draw_buf->header.stride), width);
+    }
+  }
+
+  // Encode to PNG
+  unsigned char *png = nullptr;
+  size_t pngsize = 0;
+
+  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);
+
+  if (needs_free)
+  {
+    free(packed_data);
+  }
+
+  xSemaphoreGive(g_LvglMutex);
+
+  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");
+    return ESP_FAIL;
+  }
+
+  ESP_LOGI(kTagDeviceScreenImage, "PNG ready: %zu bytes. Sending...", pngsize);
+  esp_err_t sendRes = httpd_resp_send(req, (const char *)png, pngsize);
+
+  return sendRes;
+}
+
+internal const httpd_uri_t api_devices_screen_image_uri = {
+    .uri = "/api/devices/screen.png",
+    .method = HTTP_GET,
+    .handler = api_devices_screen_image_handler,
+    .user_ctx = NULL};

Provider/main/api/devices/store.cpp

@@ -0,0 +1,57 @@
+// Device data store: CRUD helpers
+
+#include "device.hpp"
+
+// Find a device by MAC address, returns nullptr if not found
+internal device_t *find_device(const char *mac)
+{
+  for (int i = 0; i < MAX_DEVICES; i++)
+  {
+    if (g_Devices[i].active && strcmp(g_Devices[i].mac, mac) == 0)
+    {
+      return &g_Devices[i];
+    }
+  }
+  return nullptr;
+}
+
+// Register a device by MAC. Returns pointer to device (existing or new).
+// Sets *was_new to true if it was freshly registered.
+internal device_t *register_device(const char *mac, bool *was_new)
+{
+  *was_new = false;
+
+  // Check for existing
+  device_t *existing = find_device(mac);
+  if (existing)
+  {
+    return existing;
+  }
+
+  // Find a free slot
+  for (int i = 0; i < MAX_DEVICES; i++)
+  {
+    if (!g_Devices[i].active)
+    {
+      strlcpy(g_Devices[i].mac, mac, sizeof(g_Devices[i].mac));
+      g_Devices[i].active = true;
+      strlcpy(g_Devices[i].xml_layout, kDefaultLayoutXml, sizeof(g_Devices[i].xml_layout));
+      *was_new = true;
+      return &g_Devices[i];
+    }
+  }
+
+  return nullptr; // All slots full
+}
+
+// Update the XML layout for a device. Returns true on success.
+internal bool update_device_layout(const char *mac, const char *xml)
+{
+  device_t *dev = find_device(mac);
+  if (!dev)
+  {
+    return false;
+  }
+  strlcpy(dev->xml_layout, xml, sizeof(dev->xml_layout));
+  return true;
+}

Provider/main/api/devices/unity.cpp

@@ -0,0 +1,9 @@
+// Unity build entry for device endpoints
+// clang-format off
+#include "api/devices/store.cpp"
+#include "api/devices/list.cpp"
+#include "api/devices/register.cpp"
+#include "api/devices/layout.cpp"
+#include "api/devices/screen.cpp"
+#include "api/devices/screen_image.cpp"
+// clang-format on

Provider/main/device.hpp

@@ -0,0 +1,25 @@
+#pragma once
+
+#include <cstring>
+
+#include "types.hpp"
+
+constexpr int MAX_DEVICES = 8;
+constexpr int DEVICE_XML_MAX = 2048;
+
+constexpr char kDefaultLayoutXml[] = 
+    "<screen>\n"
+    "  <view width=\"100%\" height=\"100%\" layout=\"flex\" flex_flow=\"column\" style_flex_main_place=\"center\" style_flex_track_place=\"center\" style_pad_row=\"10\">\n"
+    "    <lv_label text=\"Hello World\" />\n"
+    "    <lv_label bind_text=\"device_mac\" />\n"
+    "  </view>\n"
+    "</screen>";
+
+struct device_t
+{
+  char mac[18];               // "AA:BB:CC:DD:EE:FF\0"
+  bool active;                // Slot in use
+  char xml_layout[DEVICE_XML_MAX]; // LVGL XML string for the current screen
+};
+
+internal device_t g_Devices[MAX_DEVICES] = {};

Provider/main/http_server.cpp

@@ -20,6 +20,7 @@
 #include "api/system/info.cpp"
 #include "api/system/reboot.cpp"
 #include "api/display/unity.cpp"
+#include "api/devices/unity.cpp"
 #include "api/tasks/unity.cpp"
 #include "api/users/unity.cpp"
 
@@ -264,7 +265,7 @@ internal httpd_handle_t start_webserver(void)
 
   httpd_config_t config = HTTPD_DEFAULT_CONFIG();
   config.uri_match_fn = httpd_uri_match_wildcard;
-  config.max_uri_handlers = 20;
+  config.max_uri_handlers = 26;
   config.max_open_sockets = 24;
   config.lru_purge_enable = true;
   config.stack_size = 16384;
@@ -301,6 +302,13 @@ internal httpd_handle_t start_webserver(void)
     httpd_register_uri_handler(server, &api_tasks_update_uri);
     httpd_register_uri_handler(server, &api_tasks_delete_uri);
 
+    // Register device API routes
+    httpd_register_uri_handler(server, &api_devices_get_uri);
+    httpd_register_uri_handler(server, &api_devices_register_uri);
+    httpd_register_uri_handler(server, &api_devices_layout_uri);
+    httpd_register_uri_handler(server, &api_devices_screen_info_uri);
+    httpd_register_uri_handler(server, &api_devices_screen_image_uri);
+
     // Populate dummy data for development (debug builds only)
 #ifndef NDEBUG
     seed_users();

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"

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
 
@@ -96,3 +95,7 @@ CONFIG_LV_THEME_DEFAULT_TRANSITION_TIME=0
 
 # Disable data observer patterns (unused in static render flow)
 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

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.