First commit

neode-ui/src/components/mesh/MeshDeviceSetupModal.vue

@@ -1,7 +1,7 @@
 <template>
   <BaseModal
     :show="show"
-    :title="step === 1 ? 'Mesh Radio Detected' : 'Apply Archipelago Settings'"
+    :title="step === 1 ? 'Mesh Radio Detected' : step === 2 ? 'Apply Archipelago Settings' : 'Flash Firmware'"
     max-width="max-w-lg"
     content-class="max-h-[90vh] overflow-y-auto"
     @close="dismiss"
@@ -96,9 +96,106 @@
         "Keep As Is" uses the radio exactly as it is — nothing on it is changed,
         and you can hot-swap radios any time.
       </p>
+      <button
+        class="w-full text-center text-white/40 hover:text-white/70 text-[11px] mt-3 underline underline-offset-2"
+        :disabled="!!connecting"
+        @click="openFlashStep"
+      >
+        Flash Firmware…
+      </button>
       <p v-if="error" class="text-xs text-red-400 mt-2">{{ error }}</p>
     </div>
 
+    <!-- Step 3: erase + reflash — destructive, opt-in only -->
+    <div v-else-if="step === 'flash'">
+      <template v-if="!flashJob?.active && flashJob?.stage !== 'done'">
+        <p class="text-white/60 text-xs mb-3">
+          Downloads the latest firmware from upstream and writes it to
+          <span class="font-mono text-orange-300">{{ devicePath }}</span>.
+        </p>
+
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm text-white/80 mb-1">Firmware family</label>
+            <select v-model="flashFamily" class="w-full rounded-lg bg-white/[0.06] border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:border-orange-400/60">
+              <option value="">Choose…</option>
+              <option value="meshcore">MeshCore</option>
+              <option value="meshtastic">Meshtastic</option>
+              <option value="reticulum">Reticulum RNode</option>
+            </select>
+          </div>
+          <div>
+            <label class="block text-sm text-white/80 mb-1">Board</label>
+            <select v-model="flashBoard" class="w-full rounded-lg bg-white/[0.06] border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:border-orange-400/60">
+              <option value="">Choose…</option>
+              <option value="heltec-v3">Heltec LoRa 32 V3</option>
+              <option value="heltec-v4">Heltec LoRa 32 V4</option>
+            </select>
+            <p v-if="!boardAutoDetected" class="text-[11px] text-amber-400/80 mt-1">
+              Couldn't confirm the board automatically — double check before flashing.
+              Flashing the wrong board's image can brick it.
+            </p>
+          </div>
+        </div>
+
+        <div class="rounded-xl bg-red-500/10 border border-red-500/30 p-3 mt-4">
+          <label class="flex items-start gap-2 text-xs text-red-300">
+            <input type="checkbox" v-model="flashConfirmed" class="mt-0.5" />
+            <span>
+              This <strong>erases the entire chip</strong>, including any existing
+              keys, identity, and contacts. This cannot be undone.
+            </span>
+          </label>
+        </div>
+
+        <p v-if="error" class="text-xs text-red-400 mt-3">{{ error }}</p>
+
+        <div class="flex gap-2 mt-6">
+          <button class="glass-button px-4 py-2 rounded-lg text-sm" @click="step = 1">Back</button>
+          <button
+            class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-red-500/80 hover:bg-red-500 text-white disabled:opacity-50"
+            :disabled="!flashFamily || !flashBoard || !flashConfirmed || starting"
+            @click="startFlash"
+          >
+            {{ starting ? 'Starting…' : 'Erase & Flash Now' }}
+          </button>
+        </div>
+      </template>
+
+      <!-- Progress -->
+      <template v-else>
+        <div class="text-center py-2">
+          <p class="text-white text-sm font-medium">{{ flashStageLabel }}</p>
+          <div class="mt-3 h-2 rounded-full bg-white/10 overflow-hidden">
+            <div
+              class="h-full bg-orange-400 transition-all"
+              :style="{ width: (flashJob?.percent ?? (flashJob?.stage === 'done' ? 100 : 8)) + '%' }"
+            ></div>
+          </div>
+          <p v-if="flashJob?.error" class="text-xs text-red-400 mt-3">{{ flashJob.error }}</p>
+        </div>
+        <div class="mt-3 rounded-xl bg-black/30 border border-white/10 p-2 h-32 overflow-y-auto font-mono text-[10px] text-white/50 leading-relaxed">
+          <div v-for="(line, i) in (flashJob?.log_tail ?? []).slice(-40)" :key="i">{{ line }}</div>
+        </div>
+        <div class="flex gap-2 mt-4">
+          <button
+            v-if="flashJob?.stage === 'downloading' && flashJob?.active"
+            class="glass-button px-4 py-2 rounded-lg text-sm"
+            @click="cancelFlash"
+          >
+            Cancel
+          </button>
+          <button
+            v-if="!flashJob?.active"
+            class="flex-1 glass-button glass-button-warning px-4 py-2 rounded-lg text-sm font-medium"
+            @click="closeFlashStep"
+          >
+            Done
+          </button>
+        </div>
+      </template>
+    </div>
+
     <!-- Step 2: our latest parameters, shown before anything is written -->
     <div v-else>
       <p class="text-white/60 text-xs mb-3">
@@ -185,7 +282,7 @@
 import { ref, computed, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import BaseModal from '@/components/BaseModal.vue'
-import { useMeshStore, type MeshDeviceProbe, type MeshConfigureParams } from '@/stores/mesh'
+import { useMeshStore, type MeshDeviceProbe, type MeshConfigureParams, type FlashFirmwareFamily, type FlashBoard, type FlashJobStatus } from '@/stores/mesh'
 import { useAppStore } from '@/stores/app'
 import { LORA_REGIONS, regionByCode, suggestRegionFromLatLon, meshcorePlanFor } from '@/utils/loraRegions'
 import { resolveMeshDeviceImage } from '@/utils/meshDeviceImages'
@@ -194,7 +291,7 @@ const mesh = useMeshStore()
 const appStore = useAppStore()
 const router = useRouter()
 
-const step = ref<1 | 2>(1)
+const step = ref<1 | 2 | 'flash'>(1)
 const connecting = ref<false | 'keep' | 'setup'>(false)
 const error = ref('')
 const probing = ref(false)
@@ -259,7 +356,10 @@ const rfPreset = computed(() => {
 
 // (Re)probe + (re)apply presets each time a new device surfaces the modal
 watch([show, devicePath], async ([visible]) => {
-  if (!visible) return
+  if (!visible) {
+    stopFlashPoll()
+    return
+  }
   step.value = 1
   error.value = ''
   imageFailed.value = false
@@ -344,6 +444,101 @@ async function applySetup() {
     connecting.value = false
   }
 }
+
+// ─── Step 3: erase + reflash ─────────────────────────────────────────────
+const flashFamily = ref<FlashFirmwareFamily | ''>('')
+const flashBoard = ref<FlashBoard | ''>('')
+const flashConfirmed = ref(false)
+const starting = ref(false)
+const flashJob = ref<FlashJobStatus | null>(null)
+let flashPollTimer: ReturnType<typeof setInterval> | null = null
+
+// Best-effort guess from the already-resolved board image label — the user
+// can always override; a wrong guess just means the checkbox below draws
+// their attention to the warning before anything destructive happens.
+const boardAutoDetected = computed(() => /v4/i.test(deviceImage.value.label) || /v3/i.test(deviceImage.value.label))
+
+const flashStageLabel = computed(() => {
+  switch (flashJob.value?.stage) {
+    case 'downloading': return 'Downloading firmware…'
+    case 'erasing': return 'Erasing chip…'
+    case 'writing': return 'Writing firmware…'
+    case 'autoinstalling': return 'Installing (rnodeconf)…'
+    case 'done': return 'Flash complete'
+    case 'failed': return 'Flash failed'
+    default: return ''
+  }
+})
+
+function openFlashStep() {
+  flashFamily.value = (probe.value?.kind as FlashFirmwareFamily) ?? ''
+  flashBoard.value = /v4/i.test(deviceImage.value.label) ? 'heltec-v4' : /v3/i.test(deviceImage.value.label) ? 'heltec-v3' : ''
+  flashConfirmed.value = false
+  flashJob.value = null
+  error.value = ''
+  step.value = 'flash'
+}
+
+function stopFlashPoll() {
+  if (flashPollTimer) {
+    clearInterval(flashPollTimer)
+    flashPollTimer = null
+  }
+}
+
+async function pollFlashStatus() {
+  try {
+    const status = await mesh.flashStatus()
+    flashJob.value = status
+    if (!status.active) {
+      stopFlashPoll()
+      if (status.done && !status.error) {
+        // Mirrors the unplug/replug hot-swap flow: re-probe so the details
+        // card reflects whatever firmware is actually on the board now.
+        const path = devicePath.value
+        probing.value = true
+        try {
+          probe.value = await mesh.probeDevice(path)
+        } catch {
+          probe.value = null
+        } finally {
+          probing.value = false
+        }
+      }
+    }
+  } catch {
+    stopFlashPoll()
+  }
+}
+
+async function startFlash() {
+  if (!flashFamily.value || !flashBoard.value || !flashConfirmed.value) return
+  starting.value = true
+  error.value = ''
+  try {
+    await mesh.flashDevice(devicePath.value, flashFamily.value, flashBoard.value)
+    flashJob.value = { active: true, stage: 'downloading', log_tail: [] }
+    stopFlashPoll()
+    flashPollTimer = setInterval(pollFlashStatus, 1500)
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to start flashing'
+  } finally {
+    starting.value = false
+  }
+}
+
+async function cancelFlash() {
+  try {
+    await mesh.flashCancel()
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to cancel'
+  }
+}
+
+function closeFlashStep() {
+  stopFlashPoll()
+  step.value = 1
+}
 </script>
 
 <style scoped>

neode-ui/src/stores/mesh.ts

@@ -55,6 +55,23 @@ export interface MeshDeviceProbe {
   max_contacts: number | null
 }
 
+export type FlashFirmwareFamily = 'meshcore' | 'meshtastic' | 'reticulum'
+export type FlashBoard = 'heltec-v3' | 'heltec-v4'
+export type FlashStage = 'downloading' | 'erasing' | 'writing' | 'autoinstalling' | 'done' | 'failed'
+
+/** Live progress for the one flash job that can run at a time. */
+export interface FlashJobStatus {
+  active: boolean
+  board?: FlashBoard
+  family?: FlashFirmwareFamily
+  path?: string
+  stage?: FlashStage
+  percent?: number | null
+  log_tail?: string[]
+  done?: boolean
+  error?: string | null
+}
+
 /** Params accepted by mesh.configure (superset of the status fields). */
 export interface MeshConfigureParams {
   enabled?: boolean
@@ -343,6 +360,32 @@ export const useMeshStore = defineStore('mesh', () => {
       timeout: 45000, // serial probes are slow (multi-firmware handshakes)
     })
   }
+  /** Available firmware version(s) for a family — v1 only ever returns
+   *  ["latest"], since firmware is always fetched from upstream at flash
+   *  time rather than pinned/bundled. */
+  async function flashListFirmware(family: FlashFirmwareFamily): Promise<string[]> {
+    const res = await rpcClient.call<{ versions: string[] }>({
+      method: 'mesh.flash-list-firmware',
+      params: { family },
+    })
+    return res.versions
+  }
+  /** Erase + reflash a detected radio. `board` is optional — omit it to let
+   *  the backend auto-resolve from the port's USB vid:pid; if that fails
+   *  (e.g. Heltec V4 not yet in the vid:pid table), it errors and the UI
+   *  must ask the user to pick the board explicitly. Always erases first. */
+  async function flashDevice(path: string, family: FlashFirmwareFamily, board?: FlashBoard): Promise<void> {
+    await rpcClient.call({
+      method: 'mesh.flash-device',
+      params: board ? { path, family, board } : { path, family },
+    })
+  }
+  async function flashStatus(): Promise<FlashJobStatus> {
+    return rpcClient.call<FlashJobStatus>({ method: 'mesh.flash-status' })
+  }
+  async function flashCancel(): Promise<void> {
+    await rpcClient.call({ method: 'mesh.flash-cancel' })
+  }
   let globalDetectTimer: ReturnType<typeof setInterval> | null = null
   /** App-wide light poll so the detected-device modal works on every page
    *  (the Mesh view's own 5s poll takes over while it is mounted). */
@@ -979,6 +1022,10 @@ export const useMeshStore = defineStore('mesh', () => {
     undismissedDetectedDevices,
     dismissDetectedDevice,
     probeDevice,
+    flashListFirmware,
+    flashDevice,
+    flashStatus,
+    flashCancel,
     startGlobalDetection,
     fetchPeers,
     fetchMessages,