Allow going back after failed patch

web/src/css/style.css

@@ -472,6 +472,17 @@ button.secondary:hover {
     border-color: #9ca3af;
 }
 
+button.danger {
+    background: #fff;
+    color: var(--error-text);
+    border-color: var(--error-border);
+}
+
+button.danger:hover {
+    background: var(--error-bg);
+    border-color: var(--error-text);
+}
+
 button:disabled {
     opacity: 0.4;
     cursor: not-allowed;
@@ -564,6 +575,10 @@ button.btn-success:hover {
     font-size: 0.88rem;
 }
 
+#error-message {
+    margin-top: 1rem;
+}
+
 .status-supported {
     background: var(--success-bg);
     border: 1px solid var(--success-border);

web/src/index.html

@@ -364,10 +364,14 @@
 
         <!-- Error state -->
         <section id="step-error" class="step" hidden>
-            <h2>Something went wrong</h2>
-            <p id="error-message" class="error"></p>
+            <h2 id="error-title">Something went wrong</h2>
+            <p id="error-hint" hidden>Some patches may not work correctly with your software version. You can go back and try a different selection.</p>
             <pre id="error-log" class="error-log" hidden></pre>
-            <button id="btn-retry" class="secondary">Start Over</button>
+            <p id="error-message" class="error"></p>
+            <div class="step-actions">
+                <button id="btn-error-back" class="secondary" hidden>&#x2039; Select different patches</button>
+                <button id="btn-retry" class="secondary">Start Over</button>
+            </div>
         </section>
     </main>
 

web/src/js/app.js

@@ -101,9 +101,12 @@ import JSZip from 'jszip';
     const btnWrite = $('btn-write');
     const btnDownload = $('btn-download');
     const btnRetry = $('btn-retry');
+    const btnErrorBack = $('btn-error-back');
 
     const errorMessage = $('error-message');
     const errorLog = $('error-log');
+    const errorTitle = $('error-title');
+    const errorHint = $('error-hint');
     const deviceStatus = $('device-status');
     const deviceUnknownWarning = $('device-unknown-warning');
     const deviceUnknownAck = $('device-unknown-ack');
@@ -165,6 +168,10 @@ import JSZip from 'jszip';
         stepNav.hidden = true;
     }
 
+    function showNav() {
+        stepNav.hidden = false;
+    }
+
     // --- Mode selection card interactivity ---
     function setupCardRadios(container, selectedClass) {
         const labels = $qa('label', container);
@@ -435,6 +442,7 @@ import JSZip from 'jszip';
         populateSelect(manualModel, '-- Select your Kobo model --', []);
         manualModel.hidden = true;
         btnManualConfirm.disabled = true;
+        setNavStep(2);
         showStep(stepManualVersion);
     }
 
@@ -640,6 +648,7 @@ import JSZip from 'jszip';
     btnPatchesBack.addEventListener('click', () => {
         if (manualMode) {
             // Go back to version selection in manual mode
+            setNavStep(2);
             showStep(stepManualVersion);
         } else {
             goToModeSelection();
@@ -836,7 +845,7 @@ import JSZip from 'jszip';
             showBuildResult();
             await checkExistingTgz();
         } catch (err) {
-            showError('Build failed: ' + err.message, buildLog.textContent);
+            showError('Build failed: ' + err.message, buildLog.textContent, stepPatches);
         }
     });
 
@@ -874,18 +883,46 @@ import JSZip from 'jszip';
     });
 
     // --- Error / Retry ---
-    function showError(message, log) {
+    function showError(message, log, backStep) {
         errorMessage.textContent = message;
         if (log) {
             errorLog.textContent = log;
             errorLog.hidden = false;
+            requestAnimationFrame(() => {
+                errorLog.scrollTop = errorLog.scrollHeight;
+            });
         } else {
             errorLog.hidden = true;
         }
+        if (backStep) {
+            errorTitle.textContent = 'The patch failed to apply';
+            errorHint.hidden = false;
+            btnErrorBack.hidden = false;
+            btnErrorBack._backStep = backStep;
+            btnRetry.classList.add('danger');
+        } else {
+            errorTitle.textContent = 'Something went wrong';
+            errorHint.hidden = true;
+            btnErrorBack.hidden = true;
+            btnErrorBack._backStep = null;
+            btnRetry.classList.remove('danger');
+        }
         hideNav();
         showStep(stepError);
     }
 
+    btnErrorBack.addEventListener('click', () => {
+        btnErrorBack.hidden = true;
+        btnRetry.classList.remove('danger');
+        showNav();
+        if (manualMode) {
+            setNavStep(2);
+            showStep(stepManualVersion);
+        } else {
+            goToModeSelection();
+        }
+    });
+
     btnRetry.addEventListener('click', () => {
         device.disconnect();
         firmwareURL = null;

web/src/js/patch-runner.js

@@ -52,4 +52,7 @@ class KoboPatchRunner {
     }
 }
 
+// Expose on window for E2E test compatibility
+window.KoboPatchRunner = KoboPatchRunner;
+
 export { KoboPatchRunner };