website update version display and ota handler

take latest ota code from `develop` branch and apply to legacy branch

.gitignore

@@ -8,6 +8,15 @@ target
 Cargo.lock
 node_modules/
 rust/src/webserver/bundle.js
+rust/src/webserver/bundle.js.gz
 rust/src/webserver/index.html
+rust/src/webserver/index.html.gz
+rust/src_webpack/bundle.js
+rust/src_webpack/bundle.js.gz
+rust/src_webpack/index.html
+rust/src_webpack/index.html.gz
 rust/build/
 rust/image.bin
+rust/target/
+rust/Cargo.lock
+rust/src_webpack/node_modules/

rust/all.sh

@@ -0,0 +1,22 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+"${SCRIPT_DIR}/build_website.sh"
+
+cargo build --release
+espflash save-image \
+    --bootloader "${SCRIPT_DIR}/bootloader.bin" \
+    --partition-table "${SCRIPT_DIR}/partitions.csv" \
+    --chip esp32c6 \
+    target/riscv32imac-unknown-none-elf/release/plant-ctrl2 \
+    "${SCRIPT_DIR}/image.bin"
+
+espflash flash --monitor \
+    --bootloader "${SCRIPT_DIR}/bootloader.bin" \
+    --chip esp32c6 \
+    --baud 921600 \
+    --partition-table "${SCRIPT_DIR}/partitions.csv" \
+    target/riscv32imac-unknown-none-elf/release/plant-ctrl2

rust/build.rs

@@ -1,5 +1,3 @@
-use std::process::Command;
-
 use vergen::EmitBuilder;
 
 fn linker_be_nice() {
@@ -50,72 +48,9 @@ fn linker_be_nice() {
 }
 
 fn main() {
-    webpack();
     linker_be_nice();
+    // Non-existent path causes Cargo to always re-run this script,
+    // keeping VERGEN_BUILD_TIMESTAMP fresh on every build.
+    println!("cargo:rerun-if-changed=ALWAYS_REBUILD_SENTINEL");
     let _ = EmitBuilder::builder().all_git().all_build().emit();
 }
-
-fn webpack() {
-    //println!("cargo:rerun-if-changed=./src/src_webpack");
-    Command::new("rm")
-        .arg("./src/webserver/bundle.js.gz")
-        .output()
-        .unwrap();
-
-    match Command::new("cmd").spawn() {
-        Ok(_) => {
-            println!("Assuming build on windows");
-            let output = Command::new("cmd")
-                .arg("/K")
-                .arg("npx")
-                .arg("webpack")
-                .current_dir("./src_webpack")
-                .output()
-                .unwrap();
-            println!("status: {}", output.status);
-            println!("stdout: {}", String::from_utf8_lossy(&output.stdout));
-            println!("stderr: {}", String::from_utf8_lossy(&output.stderr));
-            assert!(output.status.success());
-
-            // move webpack results to rust webserver src
-            let _ = Command::new("cmd")
-                .arg("/K")
-                .arg("move")
-                .arg("./src_webpack/bundle.js.gz")
-                .arg("./src/webserver")
-                .output()
-                .unwrap();
-            let _ = Command::new("cmd")
-                .arg("/K")
-                .arg("move")
-                .arg("./src_webpack/index.html.gz")
-                .arg("./src/webserver")
-                .output()
-                .unwrap();
-        }
-        Err(_) => {
-            println!("Assuming build on linux");
-            let output = Command::new("npx")
-                .arg("webpack")
-                .current_dir("./src_webpack")
-                .output()
-                .unwrap();
-            println!("status: {}", output.status);
-            println!("stdout: {}", String::from_utf8_lossy(&output.stdout));
-            println!("stderr: {}", String::from_utf8_lossy(&output.stderr));
-            assert!(output.status.success());
-
-            // move webpack results to rust webserver src
-            let _ = Command::new("mv")
-                .arg("./src_webpack/bundle.js.gz")
-                .arg("./src/webserver")
-                .output()
-                .unwrap();
-            let _ = Command::new("mv")
-                .arg("./src_webpack/index.html.gz")
-                .arg("./src/webserver")
-                .output()
-                .unwrap();
-        }
-    }
-}

rust/build_website.sh

@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+WEBPACK_DIR="${SCRIPT_DIR}/src_webpack"
+WEBSERVER_DIR="${SCRIPT_DIR}/src/webserver"
+
+rm -f "${WEBSERVER_DIR}/index.html.gz"
+rm -f "${WEBSERVER_DIR}/bundle.js.gz"
+rm -f "${WEBPACK_DIR}/index.html.gz"
+rm -f "${WEBPACK_DIR}/bundle.js.gz"
+rm -f "${WEBPACK_DIR}/index.html"
+rm -f "${WEBPACK_DIR}/bundle.js"
+
+pushd "${WEBPACK_DIR}"
+npm install
+npx webpack build
+cp index.html.gz "${WEBSERVER_DIR}/index.html.gz"
+cp bundle.js.gz "${WEBSERVER_DIR}/bundle.js.gz"
+popd

rust/erase_ota.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+cargo espflash erase-parts otadata --partition-table "${SCRIPT_DIR}/partitions.csv"

rust/flash.sh

@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+"${SCRIPT_DIR}/build_website.sh"
+
+cargo build --release
+espflash flash --monitor \
+    --bootloader "${SCRIPT_DIR}/bootloader.bin" \
+    --chip esp32c6 \
+    --baud 921600 \
+    --partition-table "${SCRIPT_DIR}/partitions.csv" \
+    target/riscv32imac-unknown-none-elf/release/plant-ctrl2

rust/image_build.sh

@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+rm -f "${SCRIPT_DIR}/image.bin"
+
+"${SCRIPT_DIR}/build_website.sh"
+
+cargo build --release
+espflash save-image \
+    --bootloader "${SCRIPT_DIR}/bootloader.bin" \
+    --partition-table "${SCRIPT_DIR}/partitions.csv" \
+    --chip esp32c6 \
+    target/riscv32imac-unknown-none-elf/release/plant-ctrl2 \
+    "${SCRIPT_DIR}/image.bin"

rust/src/main.rs

@@ -268,7 +268,6 @@ async fn safe_main(spawner: Spawner) -> FatResult<()> {
         publish_firmware_info(&mut board, version, ip_address, &timezone_time.to_rfc3339()).await;
         publish_battery_state(&mut board).await;
         let _ = publish_mppt_state(&mut board).await;
-        publish_config(&mut board).await;
     }
 
     log(
@@ -805,21 +804,6 @@ async fn publish_battery_state(
     }
 }
 
-async fn publish_config(
-    board: &mut MutexGuard<'_, CriticalSectionRawMutex, HAL<'_>>,
-) {
-    let config = board.board_hal.get_config();
-    match serde_json::to_string(&config) {
-        Ok(serialized) => {
-            let _ = mqtt::publish("/config", &serialized).await;
-        }
-        Err(err) => {
-            info!("Error serializing config: {}", err);
-        }
-    }
-}
-
-
 async fn wait_infinity(
     board: MutexGuard<'_, CriticalSectionRawMutex, HAL<'static>>,
     wait_type: WaitType,

rust/src/mqtt.rs

@@ -4,12 +4,10 @@ use crate::fat_error::{ContextExt, FatError, FatResult};
 use crate::hal::PlantHal;
 use crate::log::{log, LogMessage};
 use alloc::string::String;
-use alloc::{format, string::ToString, vec::Vec};
+use alloc::{format, string::ToString};
 use core::sync::atomic::Ordering;
 use embassy_executor::Spawner;
 use embassy_net::Stack;
-use embassy_sync::blocking_mutex::raw::CriticalSectionRawMutex;
-use embassy_sync::mutex::Mutex;
 use embassy_sync::once_lock::OnceLock;
 use embassy_time::{Duration, Timer, WithTimeout};
 use log::info;
@@ -39,7 +37,6 @@ static MQTT_CONNECTED_EVENT_RECEIVED: AtomicBool = AtomicBool::new(false);
 static MQTT_ROUND_TRIP_RECEIVED: AtomicBool = AtomicBool::new(false);
 pub static MQTT_STAY_ALIVE: AtomicBool = AtomicBool::new(false);
 static MQTT_BASE_TOPIC: OnceLock<String> = OnceLock::new();
-static MQTT_CONFIG_UPDATE_PAYLOAD: Mutex<CriticalSectionRawMutex, Option<String>> = Mutex::new(None);
 
 pub fn is_stay_alive() -> bool {
     MQTT_STAY_ALIVE.load(Ordering::Relaxed)
@@ -144,8 +141,6 @@ pub async fn mqtt_init(
     let last_will_topic = format!("{base_topic}/state");
     let round_trip_topic = format!("{base_topic}/internal/roundtrip");
     let stay_alive_topic = format!("{base_topic}/stay_alive");
-    let config_update_payload_topic = format!("{base_topic}/config/update_payload");
-    let config_update_topic = format!("{base_topic}/config/update");
 
     let mut builder: McutieBuilder<'_, String, PublishDisplay<String, &str>, 0> =
         McutieBuilder::new(stack, "plant ctrl", mqtt_url);
@@ -164,12 +159,10 @@ pub async fn mqtt_init(
     //TODO make configurable
     builder = builder.with_device_id("plantctrl");
 
-    let builder: McutieBuilder<'_, String, PublishDisplay<String, &str>, 4> = builder
+    let builder: McutieBuilder<'_, String, PublishDisplay<String, &str>, 2> = builder
         .with_subscriptions([
             Topic::General(round_trip_topic.clone()),
             Topic::General(stay_alive_topic.clone()),
-            Topic::General(config_update_payload_topic.clone()),
-            Topic::General(config_update_topic.clone()),
         ]);
 
     let keep_alive = Duration::from_secs(60 * 60 * 2).as_secs() as u16;
@@ -179,8 +172,6 @@ pub async fn mqtt_init(
         receiver,
         round_trip_topic.clone(),
         stay_alive_topic.clone(),
-        config_update_payload_topic.clone(),
-        config_update_topic.clone(),
     )?);
     spawner.spawn(mqtt_runner(task)?);
 
@@ -227,7 +218,7 @@ pub async fn mqtt_init(
 
 #[embassy_executor::task]
 async fn mqtt_runner(
-    task: McutieTask<'static, String, PublishDisplay<'static, String, &'static str>, 4>,
+    task: McutieTask<'static, String, PublishDisplay<'static, String, &'static str>, 2>,
 ) {
     task.run().await;
 }
@@ -237,8 +228,6 @@ async fn mqtt_incoming_task(
     receiver: McutieReceiver,
     round_trip_topic: String,
     stay_alive_topic: String,
-    config_update_payload_topic: String,
-    config_update_topic: String,
 ) {
     loop {
         let message = receiver.receive().await;
@@ -264,43 +253,6 @@ async fn mqtt_incoming_task(
                         };
                         log(LogMessage::MqttStayAliveRec, a, 0, "", "");
                         MQTT_STAY_ALIVE.store(value, Ordering::Relaxed);
-                    } else if subtopic.eq(config_update_payload_topic.as_str()) {
-                        let payload_str = String::from_utf8_lossy(&payload[..]).to_string();
-                        let mut buffer = MQTT_CONFIG_UPDATE_PAYLOAD.lock().await;
-                        *buffer = Some(payload_str);
-                        info!("MQTT config update payload received");
-                    } else if subtopic.eq(config_update_topic.as_str()) {
-                        let update_requested = payload.eq_ignore_ascii_case("true".as_ref())
-                            || payload.eq_ignore_ascii_case("1".as_ref());
-                        if update_requested {
-                            info!("MQTT config update requested");
-                            let payload_lock = MQTT_CONFIG_UPDATE_PAYLOAD.lock().await;
-                            if let Some(payload_str) = payload_lock.as_ref() {
-                                match serde_json::from_str::<crate::config::PlantControllerConfig>(payload_str) {
-                                    Ok(config) => {
-                                        info!("Deserialized config, applying...");
-                                        let board_mutex = crate::BOARD_ACCESS.get().await;
-                                        let mut board = board_mutex.lock().await;
-                                        if let Err(e) = board.board_hal.get_esp().save_config(payload_str.as_bytes().to_vec()).await {
-                                            info!("Error saving config to flash: {}", e);
-                                            let _ = publish("/config/update", "false").await;
-                                        } else {
-                                            board.board_hal.set_config(config);
-                                            info!("Config applied, rebooting");
-                                            let _ = publish("/config/update", "false").await;
-                                            board.board_hal.get_esp().deep_sleep_ms(0);
-                                        }
-                                    }
-                                    Err(e) => {
-                                        info!("Error deserializing config: {}", e);
-                                        let _ = publish("/config/update", "false").await;
-                                    }
-                                }
-                            } else {
-                                info!("No config update payload available");
-                                let _ = publish("/config/update", "false").await;
-                            }
-                        }
                     } else {
                         log(LogMessage::UnknownTopic, 0, 0, "", &topic);
                     }

rust/src/webserver/mod.rs

@@ -30,59 +30,80 @@ use core::result::Result::Ok;
 use core::sync::atomic::{AtomicBool, Ordering};
 use edge_http::io::server::{Connection, Handler, Server};
 use edge_http::Method;
-use edge_nal::TcpBind;
 use edge_nal::io::{Read, Write};
+use edge_nal::TcpBind;
 use edge_nal_embassy::{Tcp, TcpBuffers};
 use embassy_net::Stack;
 use embassy_time::Instant;
-use log::info;
+use log::{error, info};
 
-// fn ota(
+pub(crate) async fn ota_operations<T, const N: usize>(
-//     request: &mut Request<&mut EspHttpConnection>,
+    conn: &mut Connection<'_, T, { N }>,
-// ) -> Result<Option<std::string::String>, anyhow::Error> {
+    method: Method,
-//     let mut board = BOARD_ACCESS.lock().unwrap();
+) -> Result<Option<u32>, FatError>
-//     let mut ota = OtaUpdate::begin()?;
+where
-//     log::info!("start ota");
+    T: Read + Write,
-//
+{
-//     //having a larger buffer is not really faster, requires more stack and prevents the progress bar from working ;)
+    Ok(match method {
-//     const BUFFER_SIZE: usize = 512;
+        Method::Options => {
-//     let mut buffer: [u8; BUFFER_SIZE] = [0; BUFFER_SIZE];
+            conn.initiate_response(
-//     let mut total_read: usize = 0;
+                200,
-//     let mut lastiter = 0;
+                Some("OK"),
-//     loop {
+                &[
-//         let read = request.read(&mut buffer)?;
+                    ("Access-Control-Allow-Origin", "*"),
-//         total_read += read;
+                    ("Access-Control-Allow-Headers", "*"),
-//         let to_write = &buffer[0..read];
+                    ("Access-Control-Allow-Methods", "*"),
-//         //delay for watchdog and wifi stuff
+                ],
-//         board.board_hal.get_esp().delay.delay_ms(1);
+            )
-//
+            .await?;
-//         let iter = (total_read / 1024) % 8;
+            Some(200)
-//         if iter != lastiter {
+        }
-//             board.board_hal.general_fault(iter % 5 == 0);
+        Method::Post => {
-//             for i in 0..PLANT_COUNT {
+            let mut offset = 0_usize;
-//                 let _ = board.board_hal.fault(i, iter == i);
+            let mut chunk = 0;
-//             }
+            loop {
-//             lastiter = iter;
+                let buf = read_up_to_bytes_from_request(conn, Some(4096)).await?;
-//         }
+                if buf.is_empty() {
-//
+                    info!("file request for  ota finished");
-//         ota.write(to_write)?;
+                    let mut board = BOARD_ACCESS.get().await.lock().await;
-//         if read == 0 {
+                    board.board_hal.get_esp().finalize_ota().await?;
-//             break;
+                    break;
-//         }
+                } else {
-//     }
+                    let mut board = BOARD_ACCESS.get().await.lock().await;
-//     log::info!("wrote bytes ota {total_read}");
+                    board.board_hal.progress(chunk as u32).await;
-//     log::info!("finish ota");
+                    // Erase next block if we are at a 4K boundary (including the first block at offset 0)
-//     let partition = ota.raw_partition();
+                    board
-//     log::info!("finalizing and changing boot partition to {partition:?}");
+                        .board_hal
-//
+                        .get_esp()
-//     let mut finalizer = ota.finalize()?;
+                        .write_ota(offset as u32, &buf)
-//     log::info!("changing boot partition");
+                        .await?;
-//     board.board_hal.get_esp().set_restart_to_conf(true);
+                }
-//     drop(board);
+                offset += buf.len();
-//     finalizer.set_as_boot_partition()?;
+                chunk += 1;
-//     anyhow::Ok(None)
+            }
-// }
+            BOARD_ACCESS
-//
+                .get()
+                .await
+                .lock()
+                .await
+                .board_hal
+                .clear_progress()
+                .await;
+            conn.initiate_response(
+                200,
+                Some("OK"),
+                &[
+                    ("Access-Control-Allow-Origin", "*"),
+                    ("Access-Control-Allow-Headers", "*"),
+                    ("Access-Control-Allow-Methods", "*"),
+                ],
+            )
+            .await?;
+            Some(200)
+        }
+        _ => None,
+    })
+}
 
 struct HTTPRequestRouter {
     reboot_now: Arc<AtomicBool>,
@@ -105,7 +126,12 @@ impl Handler for HTTPRequestRouter {
         let path = headers.path;
 
         let prefix = "/file?filename=";
-        let status = if path.starts_with(prefix) {
+        let status = if path == "/ota" {
+            ota_operations(conn, method).await.map_err(|e| {
+                error!("Error handling ota: {e}");
+                e
+            })?
+        } else if path.starts_with(prefix) {
             file_operations(conn, method, &path, &prefix).await?
         } else {
             match method {

rust/src_webpack/src/api.ts

@@ -157,7 +157,13 @@ export interface Moistures {
 export interface VersionInfo {
     git_hash: string,
     build_time: string,
-    partition: string
+    current: string,
+    slot0_state: string,
+    slot1_state: string,
+    heap_total: number,
+    heap_used: number,
+    heap_free: number,
+    heap_max_used: number,
 }
 
 export interface BatteryState {
@@ -189,4 +195,4 @@ export interface TankInfo {
     /// water temperature
     water_temp: number | null,
     temp_sensor_error: string | null
-}
+}

rust/src_webpack/src/main.ts

@@ -31,6 +31,7 @@ import {
     FileList, SolarState, PumpTestResult
 } from "./api";
 import {SolarView} from "./solarview";
+import {toast} from "./toast";
 
 export class Controller {
     loadTankInfo(): Promise<void> {
@@ -200,15 +201,22 @@ export class Controller {
         }, false);
         ajax.addEventListener("load", () => {
             controller.progressview.removeProgress("ota_upload")
-            controller.reboot();
+            const status = ajax.status;
+            if (status >= 200 && status < 300) {
+                controller.reboot();
+            } else {
+                const statusText = ajax.statusText || "";
+                const body = ajax.responseText || "";
+                toast.error(`OTA update error (${status}${statusText ? ' ' + statusText : ''}): ${body}`);
+            }
         }, false);
         ajax.addEventListener("error", () => {
-            alert("Error ota")
             controller.progressview.removeProgress("ota_upload")
+            toast.error("OTA upload failed due to a network error.");
         }, false);
         ajax.addEventListener("abort", () => {
-            alert("abort ota")
             controller.progressview.removeProgress("ota_upload")
+            toast.error("OTA upload was aborted.");
         }, false);
         ajax.open("POST", PUBLIC_URL + "/ota");
         ajax.send(file);
@@ -569,4 +577,4 @@ window.addEventListener("beforeunload", (event) => {
         event.returnValue = confirmationMessage; // This will trigger the browser's default dialog
         return confirmationMessage;
     }
-});
+});

rust/src_webpack/src/ota.html

@@ -1,23 +1,27 @@
 <style>
-  .otakey{
+    .otakey {
-    min-width: 100px;
+        min-width: 100px;
-  }
+    }
-  .otavalue{
+
-    flex-grow: 1;
+    .otavalue {
-  }
+        flex-grow: 1;
-  .otaform {
+    }
-    min-width: 100px;
+
-    flex-grow: 1;
+    .otaform {
-  }
+        min-width: 100px;
-  .otachooser {
+        flex-grow: 1;
-    min-width: 100px;
+    }
-    width: 100%;
+
-  }
+    .otachooser {
+        min-width: 100px;
+        width: 100%;
+    }
 </style>
 <div class="flexcontainer">
     <div class="subtitle">
         Current Firmware
     </div>
+    <button style="margin-left: auto;" type="button" id="refresh_firmware_info">Refresh</button>
 </div>
 <div class="flexcontainer">
     <span class="otakey">Buildtime:</span>
@@ -28,14 +32,46 @@
     <span class="otavalue" id="firmware_githash"></span>
 </div>
 <div class="flexcontainer">
-  <span class="otakey">Partition:</span>
+    <span class="otakey">Partition:</span>
-  <span class="otavalue" id="firmware_partition"></span>
+    <span class="otavalue" id="firmware_partition"></span>
+</div>
+<div class="flexcontainer">
+    <span class="otakey">State0:</span>
+    <span class="otavalue" id="firmware_state0"></span>
+</div>
+<div class="flexcontainer">
+    <span class="otakey">State1:</span>
+    <span class="otavalue" id="firmware_state1"></span>
 </div>
 <div class="flexcontainer">
     <form class="otaform" id="upload_form" method="post">
         <input class="otachooser" type="file" name="file1" id="firmware_file"><br>
     </form>
 </div>
+<div class="flexcontainer">
+    <div class="subtitle">
+        Heap Memory
+    </div>
+    <div></div>
+</div>
+<div class="flexcontainer">
+    <span class="otakey">Free:</span>
+    <span class="otavalue" id="heap_free"></span>
+</div>
+<div class="flexcontainer">
+    <span class="otakey">Used:</span>
+    <span class="otavalue" id="heap_used"></span>
+</div>
+<div class="flexcontainer">
+    <span class="otakey">Total:</span>
+    <span class="otavalue" id="heap_total"></span>
+</div>
+<div class="flexcontainer">
+    <span class="otakey">Peak used:</span>
+    <span class="otavalue" id="heap_max_used"></span>
+</div>
+
+
 <div class="display:flex">
     <button style="margin-left: 16px; margin-top: 8px;" class="col-6" type="button" id="test">Self-Test</button>
-</div>
+</div>

rust/src_webpack/src/ota.ts

@@ -1,22 +1,38 @@
-import { Controller } from "./main";
+import {Controller} from "./main";
 import {VersionInfo} from "./api";
 
+function fmtBytes(n: number): string {
+    return `${n} B (${(n / 1024).toFixed(1)} KiB)`;
+}
+
 export class OTAView {
     readonly file1Upload: HTMLInputElement;
     readonly firmware_buildtime: HTMLDivElement;
     readonly firmware_githash: HTMLDivElement;
     readonly firmware_partition: HTMLDivElement;
+    readonly firmware_state0: HTMLDivElement;
+    readonly firmware_state1: HTMLDivElement;
+    readonly heap_free: HTMLDivElement;
+    readonly heap_used: HTMLDivElement;
+    readonly heap_total: HTMLDivElement;
+    readonly heap_max_used: HTMLDivElement;
 
     constructor(controller: Controller) {
         (document.getElementById("firmwareview") as HTMLElement).innerHTML = require("./ota.html")
 
-        let test  = document.getElementById("test") as HTMLButtonElement;
+        let test = document.getElementById("test") as HTMLButtonElement;
+        let refresh = document.getElementById("refresh_firmware_info") as HTMLButtonElement;
 
         this.firmware_buildtime = document.getElementById("firmware_buildtime") as HTMLDivElement;
         this.firmware_githash = document.getElementById("firmware_githash") as HTMLDivElement;
         this.firmware_partition = document.getElementById("firmware_partition") as HTMLDivElement;
+        this.firmware_state0 = document.getElementById("firmware_state0") as HTMLDivElement;
+        this.firmware_state1 = document.getElementById("firmware_state1") as HTMLDivElement;
+        this.heap_free = document.getElementById("heap_free") as HTMLDivElement;
+        this.heap_used = document.getElementById("heap_used") as HTMLDivElement;
+        this.heap_total = document.getElementById("heap_total") as HTMLDivElement;
+        this.heap_max_used = document.getElementById("heap_max_used") as HTMLDivElement;
 
-        
         const file = document.getElementById("firmware_file") as HTMLInputElement;
         this.file1Upload = file
         this.file1Upload.onchange = () => {
@@ -31,11 +47,21 @@ export class OTAView {
         test.onclick = () => {
             controller.selfTest();
         }
+
+        refresh.onclick = () => {
+            controller.version();
+        }
     }
 
     setVersion(versionInfo: VersionInfo) {
         this.firmware_buildtime.innerText = versionInfo.build_time;
         this.firmware_githash.innerText = versionInfo.git_hash;
-        this.firmware_partition.innerText = versionInfo.partition;
+        this.firmware_partition.innerText = versionInfo.current;
+        this.firmware_state0.innerText = versionInfo.slot0_state;
+        this.firmware_state1.innerText = versionInfo.slot1_state;
+        this.heap_free.innerText = fmtBytes(versionInfo.heap_free);
+        this.heap_used.innerText = fmtBytes(versionInfo.heap_used);
+        this.heap_total.innerText = fmtBytes(versionInfo.heap_total);
+        this.heap_max_used.innerText = fmtBytes(versionInfo.heap_max_used);
     }
-}
+}

rust/src_webpack/src/toast.ts

@@ -0,0 +1,94 @@
+class ToastService {
+  private container: HTMLElement;
+  private stylesInjected = false;
+
+  constructor() {
+    this.container = this.ensureContainer();
+    this.injectStyles();
+  }
+
+  info(message: string, timeoutMs: number = 5000) {
+    const el = this.createToast(message, 'info');
+    this.container.appendChild(el);
+    // Auto-dismiss after timeout
+    const timer = window.setTimeout(() => this.dismiss(el), timeoutMs);
+    // Dismiss on click immediately
+    el.addEventListener('click', () => {
+      window.clearTimeout(timer);
+      this.dismiss(el);
+    });
+  }
+
+  error(message: string) {
+    console.error(message);
+    const el = this.createToast(message, 'error');
+    this.container.appendChild(el);
+    // Only dismiss on click
+    el.addEventListener('click', () => this.dismiss(el));
+  }
+
+  private dismiss(el: HTMLElement) {
+    if (!el.parentElement) return;
+    el.parentElement.removeChild(el);
+  }
+
+  private createToast(message: string, type: 'info' | 'error'): HTMLElement {
+    const div = document.createElement('div');
+    div.className = `toast ${type}`;
+    div.textContent = message;
+    div.setAttribute('role', 'status');
+    div.setAttribute('aria-live', 'polite');
+    return div;
+  }
+
+  private ensureContainer(): HTMLElement {
+    let container = document.getElementById('toast-container');
+    if (!container) {
+      container = document.createElement('div');
+      container.id = 'toast-container';
+      document.body.appendChild(container);
+    }
+    return container;
+  }
+
+  private injectStyles() {
+    if (this.stylesInjected) return;
+    const style = document.createElement('style');
+    style.textContent = `
+#toast-container {
+  position: fixed;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 9999;
+}
+.toast {
+  max-width: 320px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+  cursor: pointer;
+  user-select: none;
+  font-family: sans-serif;
+  font-size: 14px;
+  line-height: 1.3;
+}
+.toast.info {
+  background-color: #d4edda; /* green-ish */
+  color: #155724;
+  border-left: 4px solid #28a745;
+}
+.toast.error {
+  background-color: #f8d7da; /* red-ish */
+  color: #721c24;
+  border-left: 4px solid #dc3545;
+}
+`;
+    document.head.appendChild(style);
+    this.stylesInjected = true;
+  }
+}
+
+export const toast = new ToastService();