From a940d1b4801a5a4325fa21738463e52ebdea1071 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Tue, 23 Sep 2025 14:08:14 +0200
Subject: [PATCH] feat: add upgrade flow for pre-2.0.0 (non-OTA) devices

---
 .../ccos/[device]/[version]/+page.svelte      | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/routes/(app)/ccos/[device]/[version]/+page.svelte b/src/routes/(app)/ccos/[device]/[version]/+page.svelte
index fdba0246..b3a72761 100644
--- a/src/routes/(app)/ccos/[device]/[version]/+page.svelte
+++ b/src/routes/(app)/ccos/[device]/[version]/+page.svelte
@@ -2,6 +2,7 @@
   import { downloadBackup } from "$lib/backup/backup";
   import { initSerial, serialPort } from "$lib/serial/connection";
   import { fade, slide } from "svelte/transition";
+  import { lt as semverLt } from "semver";
   import type { LoaderOptions, ESPLoader } from "esptool-js";
 
   let { data } = $props();
@@ -10,6 +11,10 @@
   let success = $state(false);
   let error = $state<Error | undefined>(undefined);
 
+  let isTooOld = $derived(
+    $serialPort ? semverLt($serialPort.version, "2.0.0") : false,
+  );
+
   let unsafeUpdate = $state(false);
 
   let terminalOutput = $state("");
@@ -202,10 +207,18 @@
         style:--progress="{progress * 100}%"
         class:primary={!buttonError}
         class:error={buttonError}
-        disabled={working || $serialPort === undefined || !isCorrectDevice}
+        disabled={isTooOld ||
+          working ||
+          $serialPort === undefined ||
+          !isCorrectDevice}
         onclick={update}>Apply Update</button
       >
-      {#if $serialPort && isCorrectDevice}
+      {#if isTooOld}
+        <div class="error" transition:slide>
+          Your device's firmware is too old to be updated via OTA. Follow the
+          instruction below to update it manually.
+        </div>
+      {:else if $serialPort && isCorrectDevice}
         <div transition:slide>
           Your
           <b
@@ -233,9 +246,11 @@
       {/if}
     </section>
 
-    <label class="unsafe-opt-in"
-      ><input type="checkbox" /> Unsafe recovery options</label
-    >
+    {#if !isTooOld}
+      <label class="unsafe-opt-in"
+        ><input type="checkbox" /> Unsafe recovery options</label
+      >
+    {/if}
   {/if}
 
   <div class="unsafe-updates">