Align dashboard and installer flows with spec

installer/renderer.js

@@ -44,7 +44,7 @@ function renderPackList(packs) {
     const label = document.createElement('label')
     label.className = 'packOption'
     label.innerHTML = `
-      <input type="radio" name="packChoice" value="${pack.file}" />
+      <input type="radio" name="packChoice" value="${pack.file}" data-pack-name="${pack.name}" />
       <div>
         <strong>${pack.name}</strong>
         <span>${pack.file}</span>
@@ -52,15 +52,6 @@ function renderPackList(packs) {
     `
     packList.appendChild(label)
   })
-
-  packList.addEventListener('change', () => {
-    const checked = packList.querySelector('input[name="packChoice"]:checked')
-    if (checked == null) {
-      state.selectedPack = null
-      return
-    }
-    state.selectedPack = packs.find((pack) => pack.file === checked.value) ?? null
-  })
 }
 
 async function bootstrap() {
@@ -71,6 +62,18 @@ async function bootstrap() {
 
 window.installerApi.onLog(appendLog)
 
+packList.addEventListener('change', () => {
+  const checked = packList.querySelector('input[name="packChoice"]:checked')
+  if (checked == null) {
+    state.selectedPack = null
+    return
+  }
+  state.selectedPack = {
+    file: checked.value,
+    name: checked.dataset.packName ?? checked.value
+  }
+})
+
 document.querySelectorAll('[data-back]').forEach((button) => {
   button.addEventListener('click', () => {
     setActiveStep(button.dataset.back)