From b96635a862fcc177b30655867a1ad75294822bf7 Mon Sep 17 00:00:00 2001
From: HeavenVR <github@heavenvr.tech>
Date: Mon, 9 Mar 2026 12:31:45 +0100
Subject: [PATCH 1/3] Scope serial and flash manager to component lifetime

Replace global serial port state with a scoped SerialContext utility and
add a FlashContext that manages FlashManager lifecycle with onMount cleanup.
Both contexts automatically clean up (close ports, disconnect) on unmount.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/state/serial-ports-state.svelte.ts    | 53 -------------
 src/lib/utils/serial-context.svelte.ts        | 76 +++++++++++++++++++
 src/routes/flashtool/+page.svelte             | 62 +++++++--------
 src/routes/flashtool/FirmwareFlasher.svelte   | 30 +++-----
 .../flashtool/SerialPortSelector.svelte       |  9 ++-
 src/routes/flashtool/flash-context.svelte.ts  | 60 +++++++++++++++
 6 files changed, 181 insertions(+), 109 deletions(-)
 delete mode 100644 src/lib/state/serial-ports-state.svelte.ts
 create mode 100644 src/lib/utils/serial-context.svelte.ts
 create mode 100644 src/routes/flashtool/flash-context.svelte.ts

diff --git a/src/lib/state/serial-ports-state.svelte.ts b/src/lib/state/serial-ports-state.svelte.ts
deleted file mode 100644
index fe13db94..00000000
--- a/src/lib/state/serial-ports-state.svelte.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { isSerialSupported } from '$lib/utils/compatibility';
-
-const ports = $state<SerialPort[]>([]);
-
-let initialized = false;
-
-function addPort(port: SerialPort) {
-  if (!ports.includes(port)) {
-    ports.push(port);
-  }
-}
-function removePort(port: SerialPort) {
-  const idx = ports.indexOf(port);
-  if (idx !== -1) {
-    ports.splice(idx, 1);
-  }
-}
-
-function ensureInitialized() {
-  if (initialized || !isSerialSupported) return;
-  initialized = true;
-
-  navigator.serial.addEventListener('connect', (e) => addPort(e.target as SerialPort));
-  navigator.serial.addEventListener('disconnect', (e) => removePort(e.target as SerialPort));
-
-  navigator.serial
-    .getPorts()
-    .then((existingPorts) => {
-      for (const p of existingPorts) {
-        addPort(p);
-      }
-    })
-    .catch((error) => {
-      console.error('Failed to get ports', error);
-    });
-}
-
-export const serialPortsState = {
-  get ports() {
-    ensureInitialized();
-    return ports;
-  },
-  requestPort: async (options: SerialPortRequestOptions) => {
-    if (!isSerialSupported) return null;
-    ensureInitialized();
-
-    const port = await navigator.serial.requestPort(options);
-
-    addPort(port);
-
-    return port;
-  },
-};
diff --git a/src/lib/utils/serial-context.svelte.ts b/src/lib/utils/serial-context.svelte.ts
new file mode 100644
index 00000000..2203b16a
--- /dev/null
+++ b/src/lib/utils/serial-context.svelte.ts
@@ -0,0 +1,76 @@
+import { isSerialSupported } from '$lib/utils/compatibility';
+import { onMount } from 'svelte';
+
+export class SerialContext {
+  #ports = $state<SerialPort[]>([]);
+  #onConnect: (e: Event) => void;
+  #onDisconnect: (e: Event) => void;
+
+  constructor() {
+    this.#onConnect = (e) => this.#addPort(e.target as SerialPort);
+    this.#onDisconnect = (e) => this.#removePort(e.target as SerialPort);
+
+    if (isSerialSupported) {
+      navigator.serial.addEventListener('connect', this.#onConnect);
+      navigator.serial.addEventListener('disconnect', this.#onDisconnect);
+
+      navigator.serial
+        .getPorts()
+        .then((existing) => {
+          for (const p of existing) {
+            this.#addPort(p);
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to get serial ports', error);
+        });
+    }
+  }
+
+  get ports(): readonly SerialPort[] {
+    return this.#ports;
+  }
+
+  async requestPort(options: SerialPortRequestOptions): Promise<SerialPort | null> {
+    if (!isSerialSupported) return null;
+
+    const port = await navigator.serial.requestPort(options);
+    this.#addPort(port);
+    return port;
+  }
+
+  destroy() {
+    if (isSerialSupported) {
+      navigator.serial.removeEventListener('connect', this.#onConnect);
+      navigator.serial.removeEventListener('disconnect', this.#onDisconnect);
+    }
+    for (const port of this.#ports) {
+      port.close().catch(() => {});
+    }
+    this.#ports.length = 0;
+  }
+
+  #addPort(port: SerialPort) {
+    if (!this.#ports.includes(port)) {
+      this.#ports.push(port);
+    }
+  }
+
+  #removePort(port: SerialPort) {
+    const idx = this.#ports.indexOf(port);
+    if (idx !== -1) {
+      this.#ports.splice(idx, 1);
+    }
+  }
+}
+
+/**
+ * Creates a SerialContext scoped to the current component's lifetime.
+ * Must be called during component initialization (top-level script).
+ * Automatically cleans up event listeners on unmount.
+ */
+export function useSerial(): SerialContext {
+  const ctx = new SerialContext();
+  onMount(() => () => ctx.destroy());
+  return ctx;
+}
diff --git a/src/routes/flashtool/+page.svelte b/src/routes/flashtool/+page.svelte
index 8e00ba99..16bfa57e 100644
--- a/src/routes/flashtool/+page.svelte
+++ b/src/routes/flashtool/+page.svelte
@@ -15,17 +15,17 @@
   import { Label } from '$lib/components/ui/label';
   import { Progress } from '$lib/components/ui/progress';
   import { Sheet, SheetContent, SheetHeader, SheetTitle } from '$lib/components/ui/sheet';
+  import { useSerial } from '$lib/utils/serial-context.svelte';
   import { getBrowserName, isSerialSupported } from '$lib/utils/compatibility';
   import FirmwareBoardSelector from './FirmwareBoardSelector.svelte';
   import FirmwareFlasher from './FirmwareFlasher.svelte';
-  import FlashManager from './FlashManager';
+  import { useFlashManager } from './flash-context.svelte';
   import HelpDialog from './HelpDialog.svelte';
   import SerialPortSelector from './SerialPortSelector.svelte';
 
+  const serial = useSerial();
+
   let port = $state<SerialPort | null>(null);
-  let manager = $state<FlashManager | null>(null);
-  let connectFailed = $state<boolean>(false);
-  let isFlashing = $state<boolean>(false);
 
   let terminalOpen = $state<boolean>(false);
   let terminalText = $state<string>('');
@@ -43,16 +43,13 @@
     },
   };
 
+  const flash = useFlashManager(terminal);
+
   $effect(() => {
-    if (port && !manager) {
-      connectFailed = false;
-      FlashManager.Connect(port, terminal).then((m) => {
-        manager = m;
-        connectFailed = !manager;
-      });
-    } else if (!port && manager) {
-      manager.disconnect();
-      manager = null;
+    if (port && !flash.manager) {
+      flash.connect(port);
+    } else if (!port && flash.manager) {
+      flash.disconnect();
     }
   });
 
@@ -64,52 +61,52 @@
   let eraseBeforeFlash = $state<boolean>(false);
 
   async function AppModeDevice() {
-    if (isFlashing) return;
+    if (flash.isFlashing) return;
     try {
-      isFlashing = true;
+      flash.isFlashing = true;
 
-      if (!manager) {
+      if (!flash.manager) {
         terminal.writeLine(`Host-side error during reset: no device!`);
         return;
       }
 
-      await manager.ensureApplication(true);
+      await flash.manager.ensureApplication(true);
     } catch (e) {
       terminal.writeLine(`Host-side error during reset: ${e}`);
     } finally {
-      isFlashing = false;
+      flash.isFlashing = false;
     }
   }
 
   async function RunCommand() {
-    if (isFlashing) return;
+    if (flash.isFlashing) return;
     try {
-      isFlashing = true;
+      flash.isFlashing = true;
 
-      if (!manager) {
+      if (!flash.manager) {
         terminal.writeLine(`Couldn't send: no device!`);
         return;
       }
 
-      await manager.ensureApplication();
-      await manager.sendApplicationCommand(terminalCommand);
+      await flash.manager.ensureApplication();
+      await flash.manager.sendApplicationCommand(terminalCommand);
     } catch (e) {
       terminal.writeLine(`Couldn't send: ${e}`);
     } finally {
-      isFlashing = false;
+      flash.isFlashing = false;
     }
   }
 </script>
 
 {#snippet mainContent()}
-  <SerialPortSelector bind:port disabled={isFlashing} />
+  <SerialPortSelector {serial} bind:port disabled={flash.isFlashing} />
 
-  {#if manager}
+  {#if flash.manager}
     <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">Select Channel</h3>
-    <FirmwareChannelSelector bind:channel bind:version disabled={isFlashing} />
+    <FirmwareChannelSelector bind:channel bind:version disabled={flash.isFlashing} />
 
     <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">Select Board</h3>
-    <FirmwareBoardSelector {version} bind:selectedBoard={board} disabled={isFlashing} />
+    <FirmwareBoardSelector {version} bind:selectedBoard={board} disabled={flash.isFlashing} />
 
     <div class="items-top flex space-x-2">
       <Checkbox id="erase-before-flash" bind:checked={eraseBeforeFlash} />
@@ -131,13 +128,12 @@
       <FirmwareFlasher
         {version}
         {board}
-        {manager}
+        {flash}
         {eraseBeforeFlash}
         showNonStableWarning={channel !== 'stable'}
-        bind:isFlashing
       />
     {/if}
-  {:else if port && !connectFailed}
+  {:else if port && !flash.connectFailed}
     <div class="flex flex-col items-center gap-2">
       <span class="text-center text-2xl"> Connecting... </span>
       <Progress />
@@ -145,7 +141,7 @@
     </div>
   {/if}
 
-  {#if port && connectFailed}
+  {#if port && flash.connectFailed}
     <div class="flex flex-col items-start gap-2">
       <span class="bold text-center text-2xl text-red-500"> Device connection failed </span>
       <span class="text-center">
@@ -227,7 +223,7 @@
         <div class="flex-1"></div>
         <Button class="m-2" onclick={() => (terminalText = '')}>Clear</Button>
         <!-- Reset & start application -->
-        <Button onclick={AppModeDevice} disabled={!manager || isFlashing}>Reset</Button>
+        <Button onclick={AppModeDevice} disabled={!flash.manager || flash.isFlashing}>Reset</Button>
       </SheetTitle>
     </SheetHeader>
     <div
diff --git a/src/routes/flashtool/FirmwareFlasher.svelte b/src/routes/flashtool/FirmwareFlasher.svelte
index 27917377..c5cdcd92 100644
--- a/src/routes/flashtool/FirmwareFlasher.svelte
+++ b/src/routes/flashtool/FirmwareFlasher.svelte
@@ -3,26 +3,18 @@
   import { DownloadAndVerifyBoardBinary } from '$lib/api/firmwareCDN';
   import { Button } from '$lib/components/ui/button';
   import { Progress } from '$lib/components/ui/progress';
-  import FlashManager from './FlashManager';
+  import type { FlashContext } from './flash-context.svelte';
   import RiskAcknowledgementModal from './RiskAcknowledgementModal.svelte';
 
   interface Props {
     version: string;
     board: string;
-    manager: FlashManager;
+    flash: FlashContext;
     eraseBeforeFlash: boolean;
     showNonStableWarning: boolean;
-    isFlashing?: boolean;
   }
 
-  let {
-    version,
-    board,
-    manager,
-    eraseBeforeFlash,
-    showNonStableWarning,
-    isFlashing = $bindable(false),
-  }: Props = $props();
+  let { version, board, flash, eraseBeforeFlash, showNonStableWarning }: Props = $props();
 
   let riskAcknowledgeStatus = $state<'none' | 'shown' | 'accepted'>('none');
   let progressName = $state<string | null>(null);
@@ -30,7 +22,7 @@
   let error = $state<string | null>(null);
 
   async function FlashDeviceImpl() {
-    if (!version || !board || !manager) {
+    if (!version || !board || !flash.manager) {
       progressName = null;
       error = 'No device selected.';
       return;
@@ -45,7 +37,7 @@
 
     progressName = 'Resetting...';
     progressPercent = null;
-    await manager.ensureBootloader();
+    await flash.manager.ensureBootloader();
 
     progressName = 'Downloading firmware...';
     progressPercent = null;
@@ -58,28 +50,28 @@
 
     progressName = 'Flashing firmware...';
     progressPercent = null;
-    await manager.flash(firmware, eraseBeforeFlash, progressCallback);
+    await flash.manager.flash(firmware, eraseBeforeFlash, progressCallback);
 
     progressName = 'Rebooting device... (Reconnect to power manually if stuck)';
     progressPercent = null;
-    await manager.ensureApplication();
+    await flash.manager.ensureApplication();
 
     progressName = 'Rebooted device! Flashing complete.';
     progressPercent = 100;
   }
   async function FlashDevice() {
-    if (isFlashing) return;
+    if (flash.isFlashing) return;
     if (showNonStableWarning && riskAcknowledgeStatus !== 'accepted') {
       riskAcknowledgeStatus = 'shown';
       return;
     }
     try {
-      isFlashing = true;
+      flash.isFlashing = true;
       await FlashDeviceImpl();
     } catch (e) {
       error = (e as Error).message;
     } finally {
-      isFlashing = false;
+      flash.isFlashing = false;
     }
   }
 </script>
@@ -92,7 +84,7 @@
 
 <div class="flex flex-col items-stretch justify-start gap-4">
   <!-- Flash button -->
-  <Button onclick={FlashDevice} disabled={!manager || isFlashing}>
+  <Button onclick={FlashDevice} disabled={!flash.manager || flash.isFlashing}>
     <Microchip />
     Flash
   </Button>
diff --git a/src/routes/flashtool/SerialPortSelector.svelte b/src/routes/flashtool/SerialPortSelector.svelte
index fad5c1f5..15a286e3 100644
--- a/src/routes/flashtool/SerialPortSelector.svelte
+++ b/src/routes/flashtool/SerialPortSelector.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
   import { Cpu, TriangleAlert, Unplug } from '@lucide/svelte';
   import { Button } from '$lib/components/ui/button';
-  import { serialPortsState } from '$lib/state/serial-ports-state.svelte';
+  import type { SerialContext } from '$lib/utils/serial-context.svelte';
   import { NumberToHexPadded } from '$lib/utils/convert';
 
   interface Props {
+    serial: SerialContext;
     port?: SerialPort | null;
     disabled?: boolean;
   }
 
-  let { port = $bindable(null), disabled = false }: Props = $props();
+  let { serial, port = $bindable(null), disabled = false }: Props = $props();
 
   const filters = [{ usbVendorId: 0x1a86 }, { usbVendorId: 0x10c4 }, { usbVendorId: 0x303a }];
 
@@ -23,7 +24,7 @@
     }
 
     loading = true;
-    serialPortsState
+    serial
       .requestPort({ filters })
       .then((p) => {
         port = p;
@@ -55,7 +56,7 @@
 
   // Remove port if disconnected
   $effect(() => {
-    if (port && !serialPortsState.ports.includes(port)) {
+    if (port && !serial.ports.includes(port)) {
       port = null;
     }
   });
diff --git a/src/routes/flashtool/flash-context.svelte.ts b/src/routes/flashtool/flash-context.svelte.ts
new file mode 100644
index 00000000..7bc2b070
--- /dev/null
+++ b/src/routes/flashtool/flash-context.svelte.ts
@@ -0,0 +1,60 @@
+import { onMount } from 'svelte';
+import type { IEspLoaderTerminal } from 'esptool-js';
+import FlashManager from './FlashManager';
+
+export class FlashContext {
+  #manager = $state<FlashManager | null>(null);
+  #connectFailed = $state(false);
+  #isFlashing = $state(false);
+  #terminal: IEspLoaderTerminal;
+
+  constructor(terminal: IEspLoaderTerminal) {
+    this.#terminal = terminal;
+  }
+
+  get manager(): FlashManager | null {
+    return this.#manager;
+  }
+
+  get connectFailed(): boolean {
+    return this.#connectFailed;
+  }
+
+  get isFlashing(): boolean {
+    return this.#isFlashing;
+  }
+
+  set isFlashing(value: boolean) {
+    this.#isFlashing = value;
+  }
+
+  async connect(port: SerialPort): Promise<void> {
+    this.#connectFailed = false;
+    const m = await FlashManager.Connect(port, this.#terminal);
+    this.#manager = m;
+    this.#connectFailed = !m;
+  }
+
+  async disconnect(): Promise<void> {
+    if (this.#manager) {
+      await this.#manager.disconnect();
+      this.#manager = null;
+    }
+  }
+
+  destroy(): void {
+    this.#manager?.disconnect();
+    this.#manager = null;
+  }
+}
+
+/**
+ * Creates a FlashContext scoped to the current component's lifetime.
+ * Must be called during component initialization (top-level script).
+ * Automatically disconnects on unmount.
+ */
+export function useFlashManager(terminal: IEspLoaderTerminal): FlashContext {
+  const ctx = new FlashContext(terminal);
+  onMount(() => () => ctx.destroy());
+  return ctx;
+}

From 2fdaed9671d88e436082b9ac7d8a26ae1f56d967 Mon Sep 17 00:00:00 2001
From: HeavenVR <github@heavenvr.tech>
Date: Fri, 27 Mar 2026 15:59:09 +0100
Subject: [PATCH 2/3] Fix import ordering in flash-context.svelte.ts

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/routes/flashtool/flash-context.svelte.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/flashtool/flash-context.svelte.ts b/src/routes/flashtool/flash-context.svelte.ts
index 7bc2b070..254da238 100644
--- a/src/routes/flashtool/flash-context.svelte.ts
+++ b/src/routes/flashtool/flash-context.svelte.ts
@@ -1,5 +1,5 @@
-import { onMount } from 'svelte';
 import type { IEspLoaderTerminal } from 'esptool-js';
+import { onMount } from 'svelte';
 import FlashManager from './FlashManager';
 
 export class FlashContext {

From f56e1f59ebd567a66bd4767aa8c006b027b9993e Mon Sep 17 00:00:00 2001
From: HeavenVR <github@heavenvr.tech>
Date: Wed, 1 Apr 2026 07:19:09 +0200
Subject: [PATCH 3/3] welp

---
 src/routes/flashtool/+page.ts | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/routes/flashtool/+page.ts

diff --git a/src/routes/flashtool/+page.ts b/src/routes/flashtool/+page.ts
new file mode 100644
index 00000000..a3d15781
--- /dev/null
+++ b/src/routes/flashtool/+page.ts
@@ -0,0 +1 @@
+export const ssr = false;