Spaces:

vfven
/

mission-control-v2

Running

App Files Files Community

vfven commited on Mar 22

Commit

7f6d77e

verified ·

1 Parent(s): bf1cb6d

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +141 -40

templates/index.html CHANGED Viewed

@@ -2,33 +2,139 @@
 <html lang="es">
 <head>
   <meta charset="UTF-8">
   <title>Mission Control v2 – Prueba</title>
   <style>
-    body { font-family: Arial, sans-serif; margin: 20px; background: #f8f9fa; }
-    h1 { color: #2c3e50; }
-    textarea { width: 100%; height: 100px; margin: 10px 0; padding: 10px; font-family: monospace; }
-    button { padding: 10px 20px; background: #27ae60; color: white; border: none; border-radius: 4px; cursor: pointer; }
-    button:hover { background: #219653; }
-    pre { background: #272822; color: #f8f8f2; padding: 15px; border-radius: 6px; overflow-x: auto; }
     @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
-    #result { margin-top: 20px; }
   </style>
 </head>
 <body>
-  <h1>Mission Control v2 – Prueba simple</h1>
-  <label for="task">Escribe tu misión:</label><br>
-  <textarea id="task" placeholder="Ejemplo: Genera una imagen de un gato astronauta..."></textarea><br>
   <button onclick="launchMission()">Lanzar misión</button>
   <div id="result">
     <h3>Resultado:</h3>
-    <pre id="output">Esperando...</pre>
   </div>
   <script>
@@ -36,69 +142,64 @@
       const taskInput = document.getElementById('task');
       const task = taskInput.value.trim();
       if (!task) return alert('Escribe algo primero');
       const output = document.getElementById('output');
       output.innerHTML = `
-        <div style="text-align:center; color:#666; padding:20px;">
-          <div class="spinner" style="border:4px solid #f3f3f3; border-top:4px solid #3498db; border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite; margin:0 auto 10px;"></div>
           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.innerHTML = `<pre style="color:red; background:#ffebee; padding:15px; border-radius:8px;">Error ${res.status}: ${JSON.stringify(data, null, 2)}</pre>`;
           return;
         }
         let html = '<h3>Resultado de la misión</h3>';
-        // Mostrar razonamiento del manager
         if (data.plan && data.plan.reasoning) {
           html += `<p><strong>Manager pensó:</strong> ${data.plan.reasoning}</p>`;
         }
-        // Mostrar resultados de agentes
         if (data.results && data.results.length > 0) {
-          html += '<h4>Agentes que trabajaron:</h4><ul style="list-style:none; padding-left:0;">';
           data.results.forEach(r => {
-            const statusColor = r.success ? '#2e7d32' : '#d32f2f';
-            const statusText = r.success ? 'Éxito' : 'Error';
             html += `
-              <li style="margin:12px 0; padding:12px; border-left:4px solid ${statusColor}; background:#f5f5f5; border-radius:4px;">
-                <strong>${r.agent} (${statusText})</strong><br>
-                ${r.response ? r.response.substring(0, 300) + (r.response.length > 300 ? '...' : '') : r.error || 'Sin respuesta'}
-              </li>`;
           });
-          html += '</ul>';
         } else {
           html += '<p>No se delegó a ningún agente.</p>';
         }
-        // Link de descarga si hay archivo
         if (data.file_url) {
           html += `
-            <p style="margin-top:20px;">
-              <a href="${data.file_url}" target="_blank" download style="padding:10px 20px; background:#1976d2; color:white; text-decoration:none; border-radius:6px;">
-                Descargar documento generado
-              </a>
-            </p>`;
         }
         output.innerHTML = html;
       } catch (err) {
         output.innerHTML = `<pre style="color:red; background:#ffebee; padding:15px; border-radius:8px;">Error de conexión: ${err.message}</pre>`;
       }
     }
   </script>
 </body>
 </html>

 <html lang="es">
 <head>
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mission Control v2 – Prueba</title>
   <style>
+    :root {
+      --primary: #27ae60;
+      --primary-dark: #219653;
+      --dark-bg: #1e1e1e;
+      --text-light: #e0e0e0;
+      --success: #4caf50;
+      --success-light: #81c784;
+      --error: #ef5350;
+      --error-light: #ffccbc;
+      --info: #3498db;
+      --bg-light: #f8f9fa;
+      --bg-card: #2d2d2d;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: Arial, sans-serif;
+      background: var(--bg-light);
+      color: #333;
+      margin: 20px;
+      line-height: 1.6;
+    }
+    h1 { color: #2c3e50; margin-bottom: 20px; }
+    label { font-weight: bold; display: block; margin-bottom: 8px; }
+    textarea {
+      width: 100%;
+      height: 120px;
+      padding: 12px;
+      margin-bottom: 12px;
+      font-family: monospace;
+      border: 1px solid #ccc;
+      border-radius: 6px;
+      resize: vertical;
+    }
+    button {
+      padding: 12px 24px;
+      background: var(--primary);
+      color: white;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 1rem;
+      transition: background 0.2s;
+    }
+    button:hover { background: var(--primary-dark); }
+    #result {
+      margin-top: 30px;
+      padding: 20px;
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    }
+    .spinner {
+      border: 4px solid #f3f3f3;
+      border-top: 4px solid var(--info);
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      animation: spin 1s linear infinite;
+      margin: 20px auto;
+    }
     @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
+    /* Resultados de agentes */
+    .agent-result {
+      margin: 16px 0;
+      padding: 16px;
+      border-radius: 6px;
+      background: var(--bg-card);
+      color: var(--text-light);
+      border-left: 4px solid var(--success);
+    }
+    .agent-result.error {
+      border-left-color: var(--error);
+      background: #3d1f1f;
+      color: var(--error-light);
+    }
+    .agent-result strong {
+      color: var(--success-light);
+      display: block;
+      margin-bottom: 8px;
+    }
+    .download-btn {
+      display: inline-block;
+      padding: 12px 24px;
+      background: #1976d2;
+      color: white;
+      text-decoration: none;
+      border-radius: 6px;
+      margin-top: 16px;
+      transition: background 0.2s;
+    }
+    .download-btn:hover {
+      background: #1565c0;
+    }
+    pre {
+      background: #272822;
+      color: #f8f8f2;
+      padding: 15px;
+      border-radius: 6px;
+      overflow-x: auto;
+      margin: 12px 0;
+    }
   </style>
 </head>
 <body>
+  <h1>Mission Control v2 – Prueba</h1>
+  <label for="task">Escribe tu misión:</label>
+  <textarea id="task" placeholder="Ejemplo: Genera una imagen de un gato astronauta..."></textarea>
   <button onclick="launchMission()">Lanzar misión</button>
   <div id="result">
     <h3>Resultado:</h3>
+    <div id="output">Esperando...</div>
   </div>
   <script>
       const taskInput = document.getElementById('task');
       const task = taskInput.value.trim();
       if (!task) return alert('Escribe algo primero');
       const output = document.getElementById('output');
       output.innerHTML = `
+        <div style="text-align:center; color:#666; padding:30px;">
+          <div class="spinner"></div>
           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.innerHTML = `<pre style="color:red; background:#ffebee; padding:15px; border-radius:8px;">Error ${res.status}: ${JSON.stringify(data, null, 2)}</pre>`;
           return;
         }
         let html = '<h3>Resultado de la misión</h3>';
+        // Razonamiento del manager
         if (data.plan && data.plan.reasoning) {
           html += `<p><strong>Manager pensó:</strong> ${data.plan.reasoning}</p>`;
         }
+        // Resultados de agentes
         if (data.results && data.results.length > 0) {
+          html += '<h4>Agentes que trabajaron:</h4>';
           data.results.forEach(r => {
+            const isError = !r.success;
             html += `
+              <div class="agent-result ${isError ? 'error' : ''}">
+                <strong>${r.agent} (${isError ? 'Error' : 'Éxito'})</strong>
+                <div>${r.response ? r.response.substring(0, 400) + (r.response.length > 400 ? '...' : '') : r.error || 'Sin respuesta'}</div>
+              </div>`;
           });
         } else {
           html += '<p>No se delegó a ningún agente.</p>';
         }
+        // Link de descarga
         if (data.file_url) {
           html += `
+            <a href="${data.file_url}" target="_blank" class="download-btn" download>
+              Descargar documento generado
+            </a>`;
         }
         output.innerHTML = html;
       } catch (err) {
         output.innerHTML = `<pre style="color:red; background:#ffebee; padding:15px; border-radius:8px;">Error de conexión: ${err.message}</pre>`;
       }
     }
   </script>
 </body>
 </html>