From 091979390ad57f908df223d21845a2a8e1992f70 Mon Sep 17 00:00:00 2001
From: Jared Miller <jared@smell.flowers>
Date: Wed, 28 Jan 2026 13:20:10 -0500
Subject: [PATCH] Add error handling and loading state to instructions modal

---
 public/index.html | 55 +++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 49 insertions(+), 6 deletions(-)

diff --git a/public/index.html b/public/index.html
index 942adad..04b425e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -370,6 +370,22 @@
       border-color: #ff9800;
     }
 
+    .modal-error {
+      display: none;
+      padding: 12px;
+      margin-top: 12px;
+      background: rgba(244, 67, 54, 0.1);
+      border: 1px solid #f44336;
+      border-radius: 6px;
+      color: #f44336;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    .modal-error.active {
+      display: block;
+    }
+
     .modal-actions {
       display: flex;
       gap: 8px;
@@ -481,6 +497,7 @@
           class="modal-textarea"
           id="instructionsTextarea"
           placeholder="Enter your instructions..."></textarea>
+        <div class="modal-error" id="instructionsError"></div>
       </div>
       <div class="modal-actions">
         <button class="btn btn-secondary" onclick="closeInstructionsModal()">Cancel</button>
@@ -503,6 +520,7 @@
     const $prompts = document.getElementById('prompts');
     const $instructionsModal = document.getElementById('instructionsModal');
     const $instructionsTextarea = document.getElementById('instructionsTextarea');
+    const $instructionsError = document.getElementById('instructionsError');
 
     function setStatus(connected) {
       if (connected) {
@@ -923,6 +941,8 @@
     window.openInstructionsModal = (promptId) => {
       state.instructionsModalPromptId = Number(promptId);
       $instructionsTextarea.value = '';
+      $instructionsError.classList.remove('active');
+      $instructionsError.textContent = '';
       $instructionsModal.classList.add('active');
       $instructionsTextarea.focus();
     };
@@ -942,26 +962,30 @@
     window.submitInstructions = async () => {
       const promptId = state.instructionsModalPromptId;
       if (!promptId) {
-        console.error('No prompt ID for instructions');
+        $instructionsError.textContent = 'No prompt ID for instructions';
+        $instructionsError.classList.add('active');
         return;
       }
 
       const instruction = $instructionsTextarea.value.trim();
       if (!instruction) {
-        console.error('Please enter instructions');
+        $instructionsError.textContent = 'Please enter instructions';
+        $instructionsError.classList.add('active');
         return;
       }
 
       const prompt = state.prompts.get(promptId);
       if (!prompt || !prompt.json) {
-        console.error('Invalid prompt');
+        $instructionsError.textContent = 'Invalid prompt';
+        $instructionsError.classList.add('active');
         return;
       }
 
       // Get selected option
       const selected = document.querySelector(`input[name="prompt-${promptId}"]:checked`);
       if (!selected) {
-        console.error('No option selected');
+        $instructionsError.textContent = 'No option selected';
+        $instructionsError.classList.add('active');
         return;
       }
 
@@ -971,6 +995,16 @@
         instruction: instruction,
       };
 
+      // Clear any previous errors
+      $instructionsError.classList.remove('active');
+      $instructionsError.textContent = '';
+
+      // Get submit button and set loading state
+      const $submitBtn = document.querySelector('#instructionsModal .btn-submit');
+      const originalText = $submitBtn.textContent;
+      $submitBtn.disabled = true;
+      $submitBtn.textContent = 'Submitting...';
+
       try {
         const res = await fetch(`/api/prompts/${promptId}/answer`, {
           method: 'POST',
@@ -980,12 +1014,21 @@
           body: JSON.stringify(response),
         });
         if (!res.ok) {
-          console.error('Failed to submit instructions:', await res.text());
+          const errorText = await res.text();
+          $instructionsError.textContent = `Failed to submit instructions: ${errorText}`;
+          $instructionsError.classList.add('active');
+          $submitBtn.disabled = false;
+          $submitBtn.textContent = originalText;
         } else {
           closeInstructionsModal();
+          $submitBtn.disabled = false;
+          $submitBtn.textContent = originalText;
         }
       } catch (error) {
-        console.error('Error submitting instructions:', error);
+        $instructionsError.textContent = `Error submitting instructions: ${error.message}`;
+        $instructionsError.classList.add('active');
+        $submitBtn.disabled = false;
+        $submitBtn.textContent = originalText;
       }
     };