feat: Implement web dashboard with system information, reboot, and OTA update functionality.

Provider/frontend/src/App.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { getSystemInfo, reboot } from "./lib/api.js";
+  import { getSystemInfo, reboot, getOTAStatus } from "./lib/api.js";
   import OTAUpdate from "./lib/OTAUpdate.svelte";
 
   /** @type {'loading' | 'ok' | 'error' | 'rebooting'} */
@@ -16,6 +16,12 @@
     connection: "—",
   });
 
+  let otaStatus = $state({
+    partitions: [],
+    active_partition: "—",
+    running_firmware_label: "—"
+  });
+
   /** Format uptime seconds into human-readable string */
   function formatUptime(seconds) {
     const d = Math.floor(seconds / 86400);
@@ -37,9 +43,11 @@
     return `${bytes} B`;
   }
 
-  async function fetchInfo() {
+  async function fetchAll() {
     try {
-      systemInfo = await getSystemInfo();
+      const [sys, ota] = await Promise.all([getSystemInfo(), getOTAStatus()]);
+      systemInfo = sys;
+      otaStatus = ota;
       status = "ok";
       errorMsg = "";
     } catch (e) {
@@ -62,7 +70,10 @@
   }
 
   $effect(() => {
-    fetchInfo();
+    fetchAll();
+    // Poll for status updates every 5 seconds
+    const interval = setInterval(fetchAll, 5000);
+    return () => clearInterval(interval);
   });
 
   // Resilient recovery polling: Only poll when we are waiting for a reboot
@@ -93,120 +104,153 @@
   ]);
 </script>
 
-<main class="min-h-screen bg-bg-primary flex items-center justify-center p-4">
-  <div class="w-full max-w-xl space-y-4">
+<main class="min-h-screen bg-bg-primary p-4 md:p-8 flex flex-col items-center">
+  <div class="w-full max-w-6xl space-y-8">
     <!-- Header -->
-    <div class="text-center mb-6">
-      <h1 class="text-2xl font-bold text-accent">Calendink Provider 🚀</h1>
+    <div class="text-center">
+      <h1 class="text-2xl font-bold text-accent">Calendink Provider 🚀🚀🚀</h1>
       <p class="text-text-secondary text-sm">ESP32-S3 System Dashboard v{__APP_VERSION__}</p>
-    </div>
-
-    <!-- Status Badge -->
-    <div class="flex justify-center">
-      {#if status === "loading"}
-        <div
-          class="inline-flex items-center gap-2 bg-accent/10 border border-accent/20 rounded-full px-4 py-2 text-sm text-accent"
-        >
-          <span class="w-2 h-2 rounded-full bg-accent animate-pulse"></span>
-          <span>Connecting to ESP32...</span>
-        </div>
-      {:else if status === "ok"}
-        <div
-          class="inline-flex items-center gap-2 bg-success/10 border border-success/20 rounded-full px-4 py-2 text-sm text-success"
-        >
-          <span class="w-2 h-2 rounded-full bg-success animate-pulse"></span>
-          <span>Connected</span>
-        </div>
-      {:else if status === "rebooting"}
-        <div
-          class="inline-flex items-center gap-2 bg-amber-500/10 border border-amber-500/20 rounded-full px-4 py-2 text-sm text-amber-400"
-        >
-          <span class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span>
-          <span>Rebooting...</span>
-        </div>
-      {:else}
-        <div
-          class="inline-flex items-center gap-2 bg-danger/10 border border-danger/20 rounded-full px-4 py-2 text-sm text-danger"
-        >
-          <span class="w-2 h-2 rounded-full bg-danger"></span>
-          <span>Offline — {errorMsg}</span>
-        </div>
-      {/if}
-    </div>
-
-    <!-- System Info Card -->
-    <div class="bg-bg-card border border-border rounded-xl overflow-hidden">
-      <div class="px-5 py-3 border-b border-border">
-        <h2
-          class="text-sm font-semibold text-text-primary uppercase tracking-wider"
-        >
-          System Info
-        </h2>
-      </div>
-      <div class="divide-y divide-border">
-        {#each infoItems as item}
-          <div
-            class="flex items-center justify-between px-5 py-3 hover:bg-bg-card-hover transition-colors"
-          >
-            <div class="flex items-center gap-3">
-              <span class="text-base">{item.icon}</span>
-              <span class="text-sm text-text-secondary">{item.label}</span>
-            </div>
-            <span class="text-sm font-mono text-text-primary">
-              {#if status === "loading"}
-                <span
-                  class="inline-block w-16 h-4 bg-border rounded animate-pulse"
-                ></span>
-              {:else}
-                {item.value}
-              {/if}
-            </span>
+      
+      <!-- Status Badge -->
+      <div class="flex justify-center mt-4">
+        {#if status === "loading"}
+          <div class="inline-flex items-center gap-2 bg-accent/10 border border-accent/20 rounded-full px-4 py-1.5 text-xs text-accent">
+            <span class="w-2 h-2 rounded-full bg-accent animate-pulse"></span>
+            <span>Connecting...</span>
           </div>
-        {/each}
+        {:else if status === "ok"}
+          <div class="inline-flex items-center gap-2 bg-success/10 border border-success/20 rounded-full px-4 py-1.5 text-xs text-success">
+            <span class="w-2 h-2 rounded-full bg-success animate-pulse"></span>
+            <span>Connected</span>
+          </div>
+        {:else if status === "rebooting"}
+          <div class="inline-flex items-center gap-2 bg-amber-500/10 border border-amber-500/20 rounded-full px-4 py-1.5 text-xs text-amber-400">
+            <span class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span>
+            <span>Rebooting...</span>
+          </div>
+        {:else}
+          <div class="inline-flex items-center gap-2 bg-danger/10 border border-danger/20 rounded-full px-4 py-1.5 text-xs text-danger">
+            <span class="w-2 h-2 rounded-full bg-danger"></span>
+            <span>Offline — {errorMsg}</span>
+          </div>
+        {/if}
       </div>
     </div>
 
-    <!-- Device Control Section (Reboot) -->
-    <div class="bg-bg-card border border-border rounded-xl p-5">
-      <div class="flex items-center justify-between">
-        <div>
-          <h2 class="text-sm font-semibold text-text-primary uppercase tracking-wider">
-            Device Control
-          </h2>
-          <p class="text-xs text-text-secondary mt-1">
-            Restart the ESP32 microcontroller
-          </p>
+    <!-- 2-Column Grid Layout -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
+      
+      <!-- Left Column: System Info & Partition Table -->
+      <div class="space-y-8">
+        <!-- System Info Card -->
+        <div class="bg-bg-card border border-border rounded-xl overflow-hidden shadow-xl">
+          <div class="px-5 py-3 border-b border-border">
+            <h2 class="text-sm font-semibold text-text-primary uppercase tracking-wider">
+              System Info
+            </h2>
+          </div>
+          <div class="divide-y divide-border">
+            {#each infoItems as item}
+              <div class="flex items-center justify-between px-5 py-3 hover:bg-bg-card-hover transition-colors">
+                <div class="flex items-center gap-3">
+                  <span class="text-base">{item.icon}</span>
+                  <span class="text-sm text-text-secondary">{item.label}</span>
+                </div>
+                <span class="text-sm font-mono text-text-primary">
+                  {#if status === "loading"}
+                    <span class="inline-block w-16 h-4 bg-border rounded animate-pulse"></span>
+                  {:else}
+                    {item.value}
+                  {/if}
+                </span>
+              </div>
+            {/each}
+          </div>
         </div>
-        <button
-          onclick={() => (showRebootConfirm = true)}
-          disabled={status === "rebooting" || status === "loading"}
-          class="px-4 py-2 text-sm font-medium rounded-lg transition-colors
-                 bg-danger/10 text-danger border border-danger/20
-                 hover:bg-danger/20 hover:border-danger/30
-                 disabled:opacity-40 disabled:cursor-not-allowed"
-        >
-          Reboot
-        </button>
-      </div>
-    </div>
 
-    <!-- Frontend Info & OTA Section -->
-    <OTAUpdate onReboot={() => (status = "rebooting")} />
+        <!-- Partition Table Card -->
+        <div class="bg-bg-card border border-border rounded-xl overflow-hidden shadow-xl">
+          <div class="px-5 py-3 border-b border-border flex items-center justify-between">
+            <h2 class="text-sm font-semibold text-text-primary uppercase tracking-wider">
+              Partition Table
+            </h2>
+            <span class="text-[10px] text-text-secondary font-mono">Flash: 16MB</span>
+          </div>
+          <div class="divide-y divide-border">
+            {#if status === "loading"}
+              <div class="p-5 text-center text-xs text-text-secondary animate-pulse">Loading memory layout...</div>
+            {:else}
+              {#each otaStatus.partitions as part}
+                <div class="px-5 py-2.5 flex items-center justify-between hover:bg-bg-card-hover transition-colors">
+                  <div class="flex flex-col">
+                    <div class="flex items-center gap-2">
+                      <span class="text-[11px] font-mono font-bold {part.label === otaStatus.active_partition || part.label === otaStatus.running_firmware_label ? 'text-accent' : 'text-text-primary'}">
+                        {part.label}
+                      </span>
+                      {#if part.label === otaStatus.active_partition || part.label === otaStatus.running_firmware_label}
+                        <span class="text-[8px] bg-accent/20 text-accent px-1 rounded uppercase tracking-tighter">Active</span>
+                      {/if}
+                    </div>
+                    <span class="text-[9px] text-text-secondary uppercase">
+                       Type {part.type} / Sub {part.subtype}
+                    </span>
+                  </div>
+                  <div class="text-right flex flex-col items-end">
+                    <div class="text-[11px] font-mono text-text-primary">{formatBytes(part.size)}</div>
+                    {#if part.app_version}
+                      <div class="text-[9px] text-accent font-bold">v{part.app_version}</div>
+                    {:else if part.free !== undefined}
+                      <div class="text-[9px] {part.free > 0 ? 'text-success' : 'text-text-secondary'} font-bold">
+                        {formatBytes(part.free)} free
+                      </div>
+                    {/if}
+                  </div>
+                </div>
+              {/each}
+            {/if}
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Column: Device Control & OTA Updates -->
+      <div class="space-y-8">
+        <!-- Device Control Card -->
+        <div class="bg-bg-card border border-border rounded-xl p-5 shadow-xl">
+          <div class="flex items-center justify-between">
+            <div>
+              <h2 class="text-sm font-semibold text-text-primary uppercase tracking-wider">
+                Device Control
+              </h2>
+              <p class="text-xs text-text-secondary mt-1">
+                Restart the ESP32 microcontroller
+              </p>
+            </div>
+            <button
+              onclick={() => (showRebootConfirm = true)}
+              disabled={status === "rebooting" || status === "loading"}
+              class="px-4 py-2 text-sm font-medium rounded-lg transition-colors
+                     bg-danger/10 text-danger border border-danger/20
+                     hover:bg-danger/20 hover:border-danger/30
+                     disabled:opacity-40 disabled:cursor-not-allowed"
+            >
+              Reboot
+            </button>
+          </div>
+        </div>
+
+        <!-- Updates & Maintenance Card -->
+        <OTAUpdate onReboot={() => { status = "rebooting"; isRecovering = true; }} />
+      </div>
+
+    </div>
 
     <!-- Reboot Confirmation Modal -->
     {#if showRebootConfirm}
-      <div
-        class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4"
-      >
-        <div
-          class="bg-bg-card border border-border rounded-xl p-6 max-w-sm w-full space-y-4"
-        >
-          <h3 class="text-lg font-semibold text-text-primary">
-            Confirm Reboot
-          </h3>
+      <div class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
+        <div class="bg-bg-card border border-border rounded-xl p-6 max-w-sm w-full space-y-4 shadow-2xl">
+          <h3 class="text-lg font-semibold text-text-primary">Confirm Reboot</h3>
           <p class="text-sm text-text-secondary">
-            Are you sure you want to reboot the ESP32? The device will be
-            temporarily unavailable.
+            Are you sure you want to reboot the ESP32? The device will be temporarily unavailable.
           </p>
           <div class="flex gap-3 justify-end">
             <button
@@ -217,7 +261,7 @@
             </button>
             <button
               onclick={handleReboot}
-              class="px-4 py-2 text-sm font-medium rounded-lg bg-danger text-white hover:bg-danger-hover transition-colors"
+              class="px-4 py-2 text-sm font-medium rounded-lg bg-danger text-white hover:bg-danger-hover transition-colors shadow-lg shadow-danger/20"
             >
               Reboot Now
             </button>

Provider/frontend/src/lib/OTAUpdate.svelte

@@ -1,28 +1,36 @@
 <script>
     let { onReboot = null } = $props();
-    import { getOTAStatus, uploadOTAFrontend } from "./api.js";
+    import { getOTAStatus, uploadOTAFrontend, uploadOTAFirmware, getSystemInfo } from "./api.js";
   
     const IS_DEV = import.meta.env.DEV;
 
     /** @type {'idle' | 'loading_status' | 'uploading' | 'success' | 'error'} */
     let status = $state("idle");
     let errorMsg = $state("");
-    let uploadProgress = $state(0); // 0 to 100
+    let uploadProgress = $state(0);
   
     let otaInfo = $state({
       active_slot: -1,
       active_partition: "—",
       target_partition: "—",
+      partitions: [],
+      running_firmware_label: "—"
+    });
+
+    let systemInfo = $state({
+      firmware: "—"
     });
   
     let selectedFile = $state(null);
     let showAdvanced = $state(false);
+    /** @type {'frontend' | 'firmware'} */
+    let updateMode = $state("frontend");
     let isDragging = $state(false);
   
     async function fetchStatus() {
       status = "loading_status";
       try {
-        otaInfo = await getOTAStatus();
+        [otaInfo, systemInfo] = await Promise.all([getOTAStatus(), getSystemInfo()]);
         status = "idle";
       } catch (e) {
         status = "error";
@@ -30,25 +38,20 @@
       }
     }
   
-    // Fetch status on mount
     $effect(() => {
       fetchStatus();
     });
   
     function handleFileChange(event) {
       const files = event.target.files;
-      if (files && files.length > 0) {
-        processFile(files[0]);
-      }
+      if (files && files.length > 0) processFile(files[0]);
     }
 
     function handleDrop(event) {
       event.preventDefault();
       isDragging = false;
       const files = event.dataTransfer.files;
-      if (files && files.length > 0) {
-        processFile(files[0]);
-      }
+      if (files && files.length > 0) processFile(files[0]);
     }
 
     function processFile(file) {
@@ -73,7 +76,11 @@
       }, 500);
   
       try {
-        await uploadOTAFrontend(selectedFile);
+        if (updateMode === "frontend") {
+            await uploadOTAFrontend(selectedFile);
+        } else {
+            await uploadOTAFirmware(selectedFile);
+        }
         clearInterval(progressInterval);
         uploadProgress = 100;
         status = "success";
@@ -85,119 +92,136 @@
         errorMsg = e.message;
       }
     }
-  </script>
+
+    function toggleMode(mode) {
+        if (showAdvanced && updateMode === mode) {
+            showAdvanced = false;
+        } else {
+            showAdvanced = true;
+            updateMode = mode;
+            selectedFile = null;
+            errorMsg = "";
+        }
+    }
+
+    const currentTarget = $derived(() => {
+        if (updateMode === 'frontend') return otaInfo.target_partition;
+        // For firmware, target is the slot that is NOT the running one
+        const runningLabel = otaInfo.running_firmware_label || 'ota_0';
+        return runningLabel === 'ota_0' ? 'ota_1' : 'ota_0';
+    });
+</script>
   
-  {#if !IS_DEV}
-  <div class="bg-bg-card border border-border rounded-xl overflow-hidden mt-4">
-    <div class="px-5 py-3 border-b border-border flex items-center justify-between">
-      <h2 class="text-sm font-semibold text-text-primary uppercase tracking-wider">
-        Frontend Info
-      </h2>
-      <button 
-        onclick={() => showAdvanced = !showAdvanced}
-        class="text-[10px] font-bold uppercase tracking-tight px-2 py-1 rounded bg-border text-text-secondary hover:text-text-primary transition-colors"
-      >
-        {showAdvanced ? 'Hide Tools' : 'OTA Update'}
-      </button>
-    </div>
-
-    <div class="p-5 space-y-4">
-       <!-- Version & Slot Info -->
-       <div class="grid grid-cols-2 gap-4">
-         <div class="bg-bg-primary/30 p-3 rounded-lg border border-border/50">
-           <div class="text-[10px] uppercase text-text-secondary font-bold mb-1">Version</div>
-           <div class="text-sm font-mono text-accent">v{__APP_VERSION__}</div>
-         </div>
-         <div class="bg-bg-primary/30 p-3 rounded-lg border border-border/50">
-           <div class="text-[10px] uppercase text-text-secondary font-bold mb-1">Active Slot</div>
-           <div class="text-xs font-mono text-text-primary">
-             {otaInfo.active_partition} 
-             {#if otaInfo.partitions}
-               <span class="text-text-secondary ml-1">
-                 ({(otaInfo.partitions.find(p => p.label === otaInfo.active_partition)?.free / 1024 / 1024).toFixed(2)} MB free)
-               </span>
-             {/if}
-           </div>
-         </div>
-       </div>
-
-       {#if showAdvanced}
-         <div class="pt-2 border-t border-border/50 space-y-3">
-            <div class="flex items-center justify-between">
-              <h3 class="text-xs font-bold text-text-primary">OTA Upgrade</h3>
-              <div class="text-[10px] text-text-secondary">
-                Target: <span class="font-mono">{otaInfo.target_partition}</span>
-                {#if otaInfo.partitions}
-                  <span class="ml-1">
-                    ({(otaInfo.partitions.find(p => p.label === otaInfo.target_partition)?.size / 1024 / 1024).toFixed(2)} MB capacity)
-                  </span>
-                {/if}
-              </div>
-            </div>
-
-            {#if status === "success"}
-              <div class="bg-success/10 border border-success/20 text-success p-3 rounded-lg text-xs flex items-center gap-2">
-                <span class="w-1.5 h-1.5 rounded-full bg-success"></span>
-                Update successful! The device is rebooting...
-              </div>
-            {:else}
-              <!-- Drag and Drop Zone -->
-              <div 
-                role="button"
-                aria-label="Upload partition image"
-                tabindex="0"
-                class="relative border-2 border-dashed rounded-xl p-6 transition-all duration-200 flex flex-col items-center justify-center gap-2
-                       {isDragging ? 'border-accent bg-accent/5' : 'border-border hover:border-border-hover bg-bg-primary/20'}
-                       {status === 'uploading' ? 'opacity-50 pointer-events-none' : ''}"
-                ondragover={(e) => { e.preventDefault(); isDragging = true; }}
-                ondragleave={() => isDragging = false}
-                ondrop={handleDrop}
-              >
-                <input
-                  type="file"
-                  accept=".bin"
-                  onchange={handleFileChange}
-                  class="absolute inset-0 opacity-0 cursor-pointer"
-                />
-                
-                <div class="text-2xl">📦</div>
-                {#if selectedFile}
-                  <div class="text-xs font-medium text-text-primary">{selectedFile.name}</div>
-                  <div class="text-[10px] text-text-secondary">{(selectedFile.size / 1024).toFixed(1)} KB</div>
-                {:else}
-                  <div class="text-xs text-text-primary">Drag & Drop .bin here</div>
-                  <div class="text-[10px] text-text-secondary">or click to browse</div>
-                {/if}
-              </div>
-
-              {#if selectedFile}
-                <button
-                  onclick={handleUpload}
-                  disabled={status === "uploading"}
-                  class="w-full py-2 text-xs font-bold rounded-lg transition-colors
-                         bg-accent text-white hover:brightness-110
-                         disabled:opacity-40"
-                >
-                  {status === "uploading" ? 'Processing Update...' : `Flash to ${otaInfo.target_partition}`}
-                </button>
-              {/if}
-
-              {#if status === "uploading"}
-                <div class="w-full bg-border rounded-full h-1 mt-1 overflow-hidden">
-                  <div
-                    class="bg-accent h-1 rounded-full transition-all duration-300"
-                    style="width: {uploadProgress}%"
-                  ></div>
-                </div>
-              {:else if status === "error"}
-                <p class="text-[10px] text-danger mt-1 bg-danger/5 p-2 rounded border border-danger/10">
-                  {errorMsg}
-                </p>
-              {/if}
-            {/if}
-         </div>
-       {/if}
+{#if !IS_DEV}
+<div class="bg-bg-card border border-border rounded-xl overflow-hidden mt-4">
+  <div class="px-5 py-3 border-b border-border flex items-center justify-between">
+    <h2 class="text-sm font-semibold text-text-primary uppercase tracking-wider">
+        Updates & Maintenance
+    </h2>
+    <div class="flex gap-2">
+        <button 
+            onclick={() => toggleMode('frontend')}
+            class="text-[10px] font-bold uppercase tracking-tight px-2 py-1 rounded transition-colors
+                   {showAdvanced && updateMode === 'frontend' ? 'bg-accent text-white' : 'bg-border text-text-secondary hover:text-text-primary'}"
+        >
+            Frontend OTA
+        </button>
+        <button 
+            onclick={() => toggleMode('firmware')}
+            class="text-[10px] font-bold uppercase tracking-tight px-2 py-1 rounded transition-colors
+                   {showAdvanced && updateMode === 'firmware' ? 'bg-accent text-white' : 'bg-border text-text-secondary hover:text-text-primary'}"
+        >
+            Firmware OTA
+        </button>
     </div>
   </div>
-  {/if}
+
+  <div class="p-5 space-y-4">
+     <div class="grid grid-cols-2 gap-4">
+       <div class="bg-bg-primary/30 p-3 rounded-lg border border-border/50">
+         <div class="text-[10px] uppercase text-text-secondary font-bold mb-1">UI Version</div>
+         <div class="text-sm font-mono text-accent">v{__APP_VERSION__}</div>
+         <div class="text-[9px] text-text-secondary mt-1">
+            Slot: {otaInfo.active_partition} 
+            {#if otaInfo.partitions}
+              ({(otaInfo.partitions.find(p => p.label === otaInfo.active_partition)?.free / 1024).toFixed(0)} KB free)
+            {/if}
+         </div>
+       </div>
+       <div class="bg-bg-primary/30 p-3 rounded-lg border border-border/50">
+         <div class="text-[10px] uppercase text-text-secondary font-bold mb-1">FW Version</div>
+         <div class="text-sm font-mono text-text-primary">{systemInfo.firmware}</div>
+         <div class="text-[9px] text-text-secondary mt-1">
+            Active: {otaInfo.active_slot === 0 ? 'ota_0' : 'ota_1'}
+         </div>
+       </div>
+     </div>
+
+     {#if showAdvanced}
+       <div class="pt-2 border-t border-border/50 space-y-3">
+          <div class="flex items-center justify-between">
+            <h3 class="text-xs font-bold text-text-primary">
+                OTA Upgrade ({updateMode === 'frontend' ? 'UI' : 'Firmware'})
+            </h3>
+            <div class="text-[10px] text-text-secondary">
+              Target: <span class="font-mono text-accent">{currentTarget()}</span>
+              {#if updateMode === 'frontend' && otaInfo.partitions}
+                <span class="ml-1">
+                  ({(otaInfo.partitions.find(p => p.label === otaInfo.target_partition)?.size / 1024 / 1024).toFixed(1)} MB)
+                </span>
+              {/if}
+            </div>
+          </div>
+
+          {#if status === "success"}
+            <div class="bg-success/10 border border-success/20 text-success p-3 rounded-lg text-xs flex items-center gap-2">
+              <span class="w-1.5 h-1.5 rounded-full bg-success"></span>
+              Update successful! Rebooting device...
+            </div>
+          {:else}
+            <div 
+              role="button"
+              aria-label="Upload data"
+              tabindex="0"
+              class="relative border-2 border-dashed rounded-xl p-6 transition-all duration-200 flex flex-col items-center justify-center gap-2
+                     {isDragging ? 'border-accent bg-accent/5' : 'border-border hover:border-border-hover bg-bg-primary/20'}
+                     {status === 'uploading' ? 'opacity-50 pointer-events-none' : ''}"
+              ondragover={(e) => { e.preventDefault(); isDragging = true; }}
+              ondragleave={() => isDragging = false}
+              ondrop={handleDrop}
+            >
+              <input type="file" accept=".bin" onchange={handleFileChange} class="absolute inset-0 opacity-0 cursor-pointer" />
+              <div class="text-2xl">{updateMode === 'frontend' ? '🎨' : '⚙️'}</div>
+              {#if selectedFile}
+                <div class="text-xs font-medium text-text-primary">{selectedFile.name}</div>
+                <div class="text-[10px] text-text-secondary">{(selectedFile.size / 1024).toFixed(1)} KB</div>
+              {:else}
+                <div class="text-xs text-text-primary">Drop {updateMode} .bin here</div>
+                <div class="text-[10px] text-text-secondary">or click to browse</div>
+              {/if}
+            </div>
+
+            {#if selectedFile}
+              <button
+                onclick={handleUpload}
+                disabled={status === "uploading"}
+                class="w-full py-2 text-xs font-bold rounded-lg transition-colors bg-accent text-white hover:brightness-110 disabled:opacity-40"
+              >
+                {status === "uploading" ? 'Flashing...' : `Update ${updateMode === 'frontend' ? 'UI' : 'Firmware'}`}
+              </button>
+            {/if}
+
+            {#if status === "uploading"}
+              <div class="w-full bg-border rounded-full h-1 mt-1 overflow-hidden">
+                <div class="bg-accent h-1 rounded-full transition-all duration-300" style="width: {uploadProgress}%"></div>
+              </div>
+            {:else if status === "error"}
+              <p class="text-[10px] text-danger mt-1 bg-danger/5 p-2 rounded border border-danger/10">{errorMsg}</p>
+            {/if}
+          {/if}
+       </div>
+     {/if}
+  </div>
+</div>
+{/if}
   

Provider/frontend/src/lib/api.js

@@ -40,7 +40,7 @@ export async function reboot() {
 
 /**
  * Fetch OTA status from the ESP32.
- * @returns {Promise<{active_slot: number, active_partition: string, target_partition: string}>}
+ * @returns {Promise<{active_slot: number, active_partition: string, target_partition: string, partitions: any[], running_firmware_label: string, running_firmware_slot: number}>}
  */
 export async function getOTAStatus() {
     const res = await fetch(`${API_BASE}/api/ota/status`);
@@ -73,3 +73,24 @@ export async function uploadOTAFrontend(file) {
     
     return res.json();
 }
+/**
+ * Upload a new firmware binary image.
+ * @param {File} file The firmware binary file to upload.
+ * @returns {Promise<{status: string, message: string}>}
+ */
+export async function uploadOTAFirmware(file) {
+    const res = await fetch(`${API_BASE}/api/ota/firmware`, {
+        method: 'POST',
+        body: file,
+        headers: {
+            'Content-Type': 'application/octet-stream'
+        }
+    });
+    
+    if (!res.ok) {
+        const errorText = await res.text();
+        throw new Error(`Upload failed (${res.status}): ${errorText || res.statusText}`);
+    }
+    
+    return res.json();
+}

Provider/frontend/version.json

@@ -1,5 +1,5 @@
 {
   "major": 0,
   "minor": 1,
-  "revision": 7
+  "revision": 12
 }

Provider/main/api/ota/firmware.cpp

@@ -0,0 +1,149 @@
+// SDK
+#include "cJSON.h"
+#include "esp_http_server.h"
+#include "esp_log.h"
+#include "esp_ota_ops.h"
+#include "esp_system.h"
+#include "esp_timer.h"
+#include <sys/param.h>
+
+// Project
+#include "appstate.hpp"
+#include "types.hpp"
+
+#define OTA_FIRMWARE_SCRATCH_BUFSIZE 4096
+
+internal void firmware_ota_restart_timer_callback(void *arg) { esp_restart(); }
+
+internal esp_err_t api_ota_firmware_handler(httpd_req_t *req)
+{
+  httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
+
+  const esp_partition_t *update_partition =
+      esp_ota_get_next_update_partition(NULL);
+  if (update_partition == NULL)
+  {
+    ESP_LOGE("OTA_FW", "Passive OTA partition not found");
+    httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR,
+                        "OTA partition not found");
+    return ESP_FAIL;
+  }
+
+  ESP_LOGI("OTA_FW", "Writing to partition subtype %d at offset 0x%lx",
+           update_partition->subtype, update_partition->address);
+
+  esp_ota_handle_t update_handle = 0;
+  esp_err_t err =
+      esp_ota_begin(update_partition, OTA_SIZE_UNKNOWN, &update_handle);
+  if (err != ESP_OK)
+  {
+    ESP_LOGE("OTA_FW", "esp_ota_begin failed (%s)", esp_err_to_name(err));
+    httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR,
+                        "OTA begin failed");
+    return ESP_FAIL;
+  }
+
+  char *buf = (char *)malloc(OTA_FIRMWARE_SCRATCH_BUFSIZE);
+  if (!buf)
+  {
+    ESP_LOGE("OTA_FW", "Failed to allocate buffer");
+    httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Out of memory");
+    return ESP_FAIL;
+  }
+
+  int binary_file_len = 0;
+  int remaining = req->content_len;
+
+  while (remaining > 0)
+  {
+    int recv_len =
+        httpd_req_recv(req, buf, MIN(remaining, OTA_FIRMWARE_SCRATCH_BUFSIZE));
+    if (recv_len <= 0)
+    {
+      if (recv_len == HTTPD_SOCK_ERR_TIMEOUT)
+      {
+        continue;
+      }
+      ESP_LOGE("OTA_FW", "Receive failed");
+      esp_ota_abort(update_handle);
+      free(buf);
+      httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR,
+                          "Receive failed");
+      return ESP_FAIL;
+    }
+
+    err = esp_ota_write(update_handle, (const void *)buf, recv_len);
+    if (err != ESP_OK)
+    {
+      ESP_LOGE("OTA_FW", "esp_ota_write failed (%s)", esp_err_to_name(err));
+      esp_ota_abort(update_handle);
+      free(buf);
+      httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR,
+                          "Flash write failed");
+      return ESP_FAIL;
+    }
+
+    binary_file_len += recv_len;
+    remaining -= recv_len;
+  }
+
+  free(buf);
+  ESP_LOGI("OTA_FW", "Total binary data written: %d", binary_file_len);
+
+  err = esp_ota_end(update_handle);
+  if (err != ESP_OK)
+  {
+    if (err == ESP_ERR_OTA_VALIDATE_FAILED)
+    {
+      ESP_LOGE("OTA_FW", "Image validation failed, image is corrupted");
+    }
+    else
+    {
+      ESP_LOGE("OTA_FW", "esp_ota_end failed (%s)!", esp_err_to_name(err));
+    }
+    httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR,
+                        "OTA validation/end failed");
+    return ESP_FAIL;
+  }
+
+  err = esp_ota_set_boot_partition(update_partition);
+  if (err != ESP_OK)
+  {
+    ESP_LOGE("OTA_FW", "esp_ota_set_boot_partition failed (%s)!",
+             esp_err_to_name(err));
+    httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR,
+                        "Failed to set boot partition");
+    return ESP_FAIL;
+  }
+
+  ESP_LOGI("OTA_FW", "OTA successful, rebooting...");
+
+  httpd_resp_set_type(req, "application/json");
+  cJSON *root = cJSON_CreateObject();
+  cJSON_AddStringToObject(root, "status", "success");
+  cJSON_AddStringToObject(root, "message",
+                          "Firmware update successful, rebooting...");
+  const char *response_text = cJSON_Print(root);
+  httpd_resp_sendstr(req, response_text);
+  free((void *)response_text);
+  cJSON_Delete(root);
+
+  // Trigger reboot with 1s delay
+  const esp_timer_create_args_t restart_timer_args = {
+      .callback = &firmware_ota_restart_timer_callback,
+      .arg = (void *)0,
+      .dispatch_method = ESP_TIMER_TASK,
+      .name = "fw_ota_restart_timer",
+      .skip_unhandled_events = false};
+  esp_timer_handle_t restart_timer;
+  esp_timer_create(&restart_timer_args, &restart_timer);
+  esp_timer_start_once(restart_timer, 1'000'000);
+
+  return ESP_OK;
+}
+
+internal const httpd_uri_t api_ota_firmware_uri = {.uri = "/api/ota/firmware",
+                                                   .method = HTTP_POST,
+                                                   .handler =
+                                                       api_ota_firmware_handler,
+                                                   .user_ctx = NULL};

Provider/main/api/ota/status.cpp

@@ -4,6 +4,7 @@
 #include "cJSON.h"
 #include "esp_http_server.h"
 #include "esp_littlefs.h"
+#include "esp_ota_ops.h"
 #include "esp_partition.h"
 
 // Project
@@ -20,36 +21,53 @@ internal esp_err_t api_ota_status_handler(httpd_req_t *req)
 
   cJSON_AddNumberToObject(root, "active_slot", g_Active_WWW_Partition);
 
-  constexpr const char *kPartitions[] = {"www_0", "www_1", "ota_0", "ota_1",
-                                         "factory"};
-  constexpr size_t kPartitionCount = ArrayCount(kPartitions);
   cJSON *parts_arr = cJSON_AddArrayToObject(root, "partitions");
 
-  for (size_t i = 0; i < kPartitionCount; i++)
+  esp_partition_iterator_t it = esp_partition_find(
+      ESP_PARTITION_TYPE_ANY, ESP_PARTITION_SUBTYPE_ANY, NULL);
+  while (it != NULL)
   {
+    const esp_partition_t *p = esp_partition_get(it);
     cJSON *p_obj = cJSON_CreateObject();
-    cJSON_AddStringToObject(p_obj, "label", kPartitions[i]);
+    cJSON_AddStringToObject(p_obj, "label", p->label);
+    cJSON_AddNumberToObject(p_obj, "type", p->type);
+    cJSON_AddNumberToObject(p_obj, "subtype", p->subtype);
+    cJSON_AddNumberToObject(p_obj, "address", p->address);
+    cJSON_AddNumberToObject(p_obj, "size", p->size);
 
-    const esp_partition_t *p = esp_partition_find_first(
-        ESP_PARTITION_TYPE_DATA, ESP_PARTITION_SUBTYPE_ANY, kPartitions[i]);
-    if (p)
+    // Try to get LittleFS info if it's a data partition
+    if (p->type == ESP_PARTITION_TYPE_DATA)
     {
-      cJSON_AddNumberToObject(p_obj, "size", p->size);
-
       size_t total = 0, used = 0;
-      if (esp_littlefs_info(kPartitions[i], &total, &used) == ESP_OK)
+      if (esp_littlefs_info(p->label, &total, &used) == ESP_OK)
       {
         cJSON_AddNumberToObject(p_obj, "used", used);
         cJSON_AddNumberToObject(p_obj, "free", total - used);
       }
       else
       {
-        // Not mounted or not LFS
-        cJSON_AddNumberToObject(p_obj, "used", 0);
-        cJSON_AddNumberToObject(p_obj, "free", p->size);
+        // For other data partitions (nvs, phy_init), just show total as used
+        // for now
+        cJSON_AddNumberToObject(p_obj, "used", p->size);
+        cJSON_AddNumberToObject(p_obj, "free", 0);
       }
     }
+    // For app partitions, try to find the binary size
+    else if (p->type == ESP_PARTITION_TYPE_APP)
+    {
+      esp_app_desc_t app_desc;
+      if (esp_ota_get_partition_description(p, &app_desc) == ESP_OK)
+      {
+        // This is a bit of a hack as we don't have a direct "binary size" in
+        // the header but we can at least show it's occupied. For simplicity, if
+        // it's a valid app, we'll mark some space as used. Actually, without a
+        // better way to get the exact bin size, we'll just show it's an App.
+        cJSON_AddStringToObject(p_obj, "app_version", app_desc.version);
+      }
+    }
+
     cJSON_AddItemToArray(parts_arr, p_obj);
+    it = esp_partition_next(it);
   }
 
   cJSON_AddStringToObject(root, "active_partition",
@@ -57,6 +75,24 @@ internal esp_err_t api_ota_status_handler(httpd_req_t *req)
   cJSON_AddStringToObject(root, "target_partition",
                           g_Active_WWW_Partition == 0 ? "www_1" : "www_0");
 
+  const esp_partition_t *running = esp_ota_get_running_partition();
+  if (running)
+  {
+    cJSON_AddStringToObject(root, "running_firmware_label", running->label);
+    if (running->subtype >= ESP_PARTITION_SUBTYPE_APP_OTA_MIN &&
+        running->subtype <= ESP_PARTITION_SUBTYPE_APP_OTA_MAX)
+    {
+      cJSON_AddNumberToObject(root, "running_firmware_slot",
+                              running->subtype -
+                                  ESP_PARTITION_SUBTYPE_APP_OTA_MIN);
+    }
+    else
+    {
+      cJSON_AddNumberToObject(root, "running_firmware_slot",
+                              -1); // Factory or other
+    }
+  }
+
   const char *status_info = cJSON_Print(root);
   httpd_resp_sendstr(req, status_info);
 

Provider/main/http_server.cpp

@@ -13,12 +13,12 @@
 #endif
 
 // Project
+#include "api/ota/firmware.cpp"
 #include "api/ota/frontend.cpp"
 #include "api/ota/status.cpp"
 #include "api/system/info.cpp"
 #include "api/system/reboot.cpp"
 
-
 internal const char *TAG = "HTTP_SERVER";
 
 constexpr uint8 kGZ_Extension_Length = sizeof(".gz") - 1;
@@ -234,6 +234,7 @@ internal httpd_handle_t start_webserver(void)
     httpd_register_uri_handler(server, &api_system_reboot_uri);
     httpd_register_uri_handler(server, &api_ota_status_uri);
     httpd_register_uri_handler(server, &api_ota_frontend_uri);
+    httpd_register_uri_handler(server, &api_ota_firmware_uri);
 
 #ifdef CONFIG_CALENDINK_DEPLOY_WEB_PAGES
     // Register static file handler last as a catch-all wildcard if deployed

Provider/main/main.cpp

@@ -3,14 +3,14 @@
 
 // SDK
 #include "esp_log.h"
+#include "esp_ota_ops.h"
+#include "esp_system.h"
 #include "freertos/FreeRTOS.h"
 #include "freertos/task.h"
 #include "nvs.h"
 #include "nvs_flash.h"
-#include "sdkconfig.h"
 #include "soc/gpio_num.h"
 
-
 // Project headers
 #include "appstate.hpp"
 #include "types.hpp"
@@ -26,7 +26,7 @@ internal constexpr bool kBlockUntilEthernetEstablished = false;
 
 extern "C" void app_main()
 {
-  printf("Hello, Worldi!\n");
+  printf("Hello, Calendink OTA! [V1.1]\n");
 
   httpd_handle_t web_server = NULL;
 
@@ -41,11 +41,27 @@ extern "C" void app_main()
   nvs_handle_t my_handle;
   if (nvs_open("storage", NVS_READWRITE, &my_handle) == ESP_OK)
   {
-    err = nvs_get_u8(my_handle, "www_part", &g_Active_WWW_Partition);
-    if (err != ESP_OK && err != ESP_ERR_NVS_NOT_FOUND)
+    // If we are running from the factory partition, force the www partition to
+    // 0 This ensures that after a USB flash (which only writes to www_0), we
+    // aren't stuck looking at an old www_1.
+    const esp_partition_t *running = esp_ota_get_running_partition();
+    if (running && running->subtype == ESP_PARTITION_SUBTYPE_APP_FACTORY)
     {
-      printf("Error reading www_part from NVS: %s\n", esp_err_to_name(err));
+      printf(
+          "Running from factory: resetting www_part to 0 for consistency.\n");
+      g_Active_WWW_Partition = 0;
+      nvs_set_u8(my_handle, "www_part", 0);
+      nvs_commit(my_handle);
     }
+    else
+    {
+      err = nvs_get_u8(my_handle, "www_part", &g_Active_WWW_Partition);
+      if (err != ESP_OK && err != ESP_ERR_NVS_NOT_FOUND)
+      {
+        printf("Error reading www_part from NVS: %s\n", esp_err_to_name(err));
+      }
+    }
+
     if (g_Active_WWW_Partition > 1)
     {
       g_Active_WWW_Partition = 0;
@@ -151,6 +167,9 @@ extern "C" void app_main()
 
   printf("Connected!\n");
 
+  // Mark the current app as valid to cancel rollback
+  esp_ota_mark_app_valid_cancel_rollback();
+
   // Start the webserver
   web_server = start_webserver();