Update templates/index.html

templates/index.html

@@ -30,31 +30,42 @@
   <script>
     async function launchMission() {
       const task = document.getElementById('task').value.trim();
-      if (!task) {
-        alert('Escribe algo primero');
-        return;
-      }
-
+      if (!task) return alert('Escribe algo primero');
+    
       const output = document.getElementById('output');
-      output.textContent = 'Procesando...';
-
+      output.innerHTML = '<div style="color:#666;">Procesando... (puede tardar 10–60 segundos la primera vez)</div>';
+    
       try {
         const res = await fetch('/api/mission', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({ task })
         });
-
+    
         const data = await res.json();
-
+    
         if (!res.ok) {
-          output.textContent = `Error ${res.status}: ${JSON.stringify(data, null, 2)}`;
+          output.innerHTML = `<pre style="color:red;">Error ${res.status}: ${JSON.stringify(data, null, 2)}</pre>`;
           return;
         }
-
-        output.textContent = JSON.stringify(data, null, 2);
+    
+        let html = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
+    
+        if (data.file_path) {
+          html += `<p><a href="/data/docs/${data.file_path}" download>Descargar documento generado</a></p>`;
+        }
+    
+        if (data.results && data.results.length > 0) {
+          html += '<h3>Resultados de agentes:</h3><ul>';
+          data.results.forEach(r => {
+            html += `<li><strong>${r.agent}:</strong> ${r.response ? r.response.substring(0, 200) + '...' : r.error}</li>`;
+          });
+          html += '</ul>';
+        }
+    
+        output.innerHTML = html;
       } catch (err) {
-        output.textContent = 'Error de conexión: ' + err.message;
+        output.innerHTML = `<pre style="color:red;">Error de conexión: ${err.message}</pre>`;
       }
     }
   </script>