Add loading states to all agent generate buttons with proper try-catch blocks

AIDesign/app/static/index.html

@@ -127,6 +127,13 @@
     const toneSel = document.getElementById('tone');
     form.addEventListener('submit', async (e)=>{
       e.preventDefault();
+      
+      // Set loading state
+      const submitBtn = form.querySelector('button[type="submit"]');
+      const originalText = submitBtn.textContent;
+      submitBtn.textContent = 'Generating...';
+      submitBtn.disabled = true;
+      
       wire.innerHTML = '(loading)';
       mm.textContent = '(loading)';
       mmSvg.style.display='none';
@@ -196,6 +203,11 @@
           }
         }
       }catch(err){ wire.textContent=String(err); mm.textContent=''; raw.textContent=''; }
+      finally {
+        // Reset button state
+        submitBtn.textContent = originalText;
+        submitBtn.disabled = false;
+      }
     });
     openNew.addEventListener('click', ()=>{
       if (!lastWireHtml) {

AIIntegration/app/static/index.html

@@ -61,6 +61,11 @@
     // no inline key input: rely on stored key
 
     elBtn.addEventListener('click', async () => {
+      // Set loading state
+      const originalText = elBtn.textContent;
+      elBtn.textContent = 'Searching...';
+      elBtn.disabled = true;
+      
       const payload = {
         question: elQ.value.trim(),
         channel: elC.value.trim() || null,
@@ -100,6 +105,10 @@
         `;
       } catch (e) {
         elOut.innerHTML = `<div style="color:#b91c1c;">Error: ${String(e)}</div>`;
+      } finally {
+        // Reset button state
+        elBtn.textContent = originalText;
+        elBtn.disabled = false;
       }
     });
   </script>

AIReadiness/app/static/index.html

@@ -75,18 +75,26 @@
     }).join('');
     form.addEventListener('submit', async (e)=>{
       e.preventDefault();
+      
+      // Set loading state
+      const submitBtn = form.querySelector('button[type="submit"]');
+      const originalText = submitBtn.textContent;
+      submitBtn.textContent = 'Generating Scorecard...';
+      submitBtn.disabled = true;
+      
       out.innerHTML = '(loading)';
       raw.textContent = '(loading)';
-      const answers = questions.map((q,i)=>({ id: i+1, question: q, answer: (document.getElementById('q_'+(i+1)).value||'').trim() }));
-      const body = { company: (company.value||'').trim() || undefined, industry: (industry.value||'').trim() || undefined, answers, api_key: (function(){ try { return (localStorage.getItem('OPENAI_API_KEY')||'').trim(); } catch(e){ return ''; } })() || null };
-      const savedKey = (function(){ try { return (localStorage.getItem('OPENAI_API_KEY')||'').trim(); } catch(e){ return ''; } })();
-      const r = await fetch('/audit/score', { method:'POST', headers:{'Content-Type':'application/json', 'Authorization': savedKey ? ('Bearer ' + savedKey) : undefined, 'x-openai-key': savedKey || ''}, body: JSON.stringify(body) });
-      const text = await r.text();
-      let data={};
-      try{ data = text ? JSON.parse(text) : {}; }catch{ data = { error:text } }
-      raw.textContent = JSON.stringify(data, null, 2);
-      if(!r.ok){ out.textContent = 'Error generating scorecard'; return; }
-      out.innerHTML = `
+      try {
+        const answers = questions.map((q,i)=>({ id: i+1, question: q, answer: (document.getElementById('q_'+(i+1)).value||'').trim() }));
+        const body = { company: (company.value||'').trim() || undefined, industry: (industry.value||'').trim() || undefined, answers, api_key: (function(){ try { return (localStorage.getItem('OPENAI_API_KEY')||'').trim(); } catch(e){ return ''; } })() || null };
+        const savedKey = (function(){ try { return (localStorage.getItem('OPENAI_API_KEY')||'').trim(); } catch(e){ return ''; } })();
+        const r = await fetch('/audit/score', { method:'POST', headers:{'Content-Type':'application/json', 'Authorization': savedKey ? ('Bearer ' + savedKey) : undefined, 'x-openai-key': savedKey || ''}, body: JSON.stringify(body) });
+        const text = await r.text();
+        let data={};
+        try{ data = text ? JSON.parse(text) : {}; }catch{ data = { error:text } }
+        raw.textContent = JSON.stringify(data, null, 2);
+        if(!r.ok){ out.textContent = 'Error generating scorecard'; return; }
+        out.innerHTML = `
         <div class="card">
           <h2>${data.company || 'Your organization'}</h2>
           <p><strong>Overall readiness:</strong> ${data.overall_score}/100</p>
@@ -107,6 +115,13 @@
           <p><strong>Next steps</strong></p>
           <ul>${(data.next_steps||[]).map(x=>`<li>${x}</li>`).join('')}</ul>
         </div>`;
+      } catch(err) {
+        out.textContent = 'Error: ' + err.message;
+      } finally {
+        // Reset button state
+        submitBtn.textContent = originalText;
+        submitBtn.disabled = false;
+      }
     });
   </script>
 </body>

AISolutions/app/static/index.html

@@ -65,6 +65,13 @@
     // no inline key input: rely on stored key
     form.addEventListener('submit', async (e) => {
       e.preventDefault();
+      
+      // Set loading state
+      const submitBtn = form.querySelector('button[type="submit"]');
+      const originalText = submitBtn.textContent;
+      submitBtn.textContent = 'Finding Opportunities...';
+      submitBtn.disabled = true;
+      
       const industry = document.getElementById('industry').value.trim();
       const pains = document.getElementById('pains').value.split(',').map(p=>p.trim()).filter(Boolean);
       const engine = 'agent';
@@ -90,6 +97,10 @@
         summaryEl.textContent = 'Error: ' + String(e);
         cardsEl.innerHTML = '';
         jsonEl.textContent = '';
+      } finally {
+        // Reset button state
+        submitBtn.textContent = originalText;
+        submitBtn.disabled = false;
       }
     });
     function renderLoading(){ summaryEl.textContent='Loading...'; cardsEl.innerHTML=''; jsonEl.textContent='(loading)'; }