@ai-qa/workflow 2.0.2 → 2.0.4

package/qa-dashboard/views/run.ejs

@@ -1,69 +1,116 @@
 <% layout = 'layouts/main' %>
-<% title = 'Run: ' + run.id %>
+<% title = 'Run: ' + (typeof run !== 'undefined' && run && run.id ? run.id.substring(0, 16) : 'Details') %>
 
 <div class="page-header">
-  <h1>Run: <%= run.id %></h1>
+  <h1>Run Details</h1>
   <div class="header-actions">
-    <span class="badge <%= run.result.success ? 'badge-pass' : 'badge-fail' %>"><%= run.result.success ? 'PASSED' : 'FAILED' %></span>
-    <a href="/runs?project=<%= project.id %>" class="btn btn-sm">← Back</a>
+    <% if (typeof run !== 'undefined' && run && run.result) { %>
+      <span class="badge <%= run.result.success ? 'badge-pass' : 'badge-fail' %>" style="font-size:0.85rem;padding:0.4rem 1rem;">
+        <%= run.result.success ? '✅ PASSED' : (run.result.success === null ? '⏳ RUNNING' : '❌ FAILED') %>
+      </span>
+    <% } %>
+    <a href="/runs?project=<%= (typeof project !== 'undefined' && project) ? project.id : '' %>" class="btn btn-sm">← Back to Runs</a>
   </div>
 </div>
 
+<% if (typeof run === 'undefined' || !run || !run.result) { %>
+<div class="empty-state">
+  <p>Aucun résultat d'exécution trouvé pour ce run.</p>
+  <a href="/runs?project=<%= (typeof project !== 'undefined' && project) ? project.id : '' %>" class="btn btn-primary" style="margin-top:0.5rem;">Retour aux runs</a>
+</div>
+<% } else { %>
+
 <div class="row">
+  <!-- Left Side: Summary & Actions -->
   <div class="col col-30">
-    <div class="card">
-      <h3>Summary</h3>
+    <div class="card card-cream">
+      <h3>📊 Run Summary</h3>
       <table class="info-table">
-        <tr><td>Status</td><td><%= run.result.success ? '✅ Passed' : '❌ Failed' %></td></tr>
-        <tr><td>Duration</td><td><%= (run.result.duration / 1000).toFixed(1) %>s</td></tr>
-        <tr><td>Test</td><td><%= run.result.test %></td></tr>
-        <tr><td>Timestamp</td><td><%= new Date(run.result.timestamp).toLocaleString() %></td></tr>
-        <tr><td>Failures</td><td><%= run.result.failedTests ? run.result.failedTests.length : 0 %></td></tr>
+        <tr>
+          <td>Status</td>
+          <td><strong><%= run.result.success ? 'Passed' : (run.result.success === null ? 'In Progress' : 'Failed') %></strong></td>
+        </tr>
+        <tr>
+          <td>Duration</td>
+          <td><strong><%= run.result.duration ? (run.result.duration / 1000).toFixed(1) + 's' : 'N/A' %></strong></td>
+        </tr>
+        <tr>
+          <td>Test Suite</td>
+          <td><code style="font-family:var(--font-mono);font-size:0.78rem;"><%= run.result.test || 'All' %></code></td>
+        </tr>
+        <tr>
+          <td>Timestamp</td>
+          <td><%= run.result.timestamp ? new Date(run.result.timestamp).toLocaleString() : 'N/A' %></td>
+        </tr>
+        <tr>
+          <td>Failures</td>
+          <td>
+            <span style="font-weight:600;color:<%= run.result.failedTests && run.result.failedTests.length > 0 ? 'var(--danger)' : 'var(--success)' %>">
+              <%= run.result.failedTests ? run.result.failedTests.length : 0 %>
+            </span>
+          </td>
+        </tr>
       </table>
     </div>
 
     <div class="card">
-      <h3>Report Actions</h3>
+      <h3>📂 Report Actions</h3>
       <div class="action-buttons-vertical">
         <% if (run.report) { %>
-        <a href="/export/report/<%= run.id %>?project=<%= project.id %>" class="btn btn-primary" target="_blank">View Full Report</a>
-        <a href="/export/pdf/<%= run.id %>?project=<%= project.id %>" class="btn">Download Report (.txt)</a>
+          <a href="/export/report/<%= run.id %>?project=<%= project.id %>" class="btn btn-primary" target="_blank">Export HTML Report</a>
+          <a href="/export/pdf/<%= run.id %>?project=<%= project.id %>" class="btn">Download Raw (.txt)</a>
         <% } else { %>
-        <p style="color:var(--text-muted);font-size:0.85rem;">No report available yet. Generate one from the pipeline.</p>
+          <p style="color:var(--text-disabled);font-size:0.85rem;margin-bottom:0.5rem;">No summary report generated yet.</p>
         <% } %>
         <% if (run.hasAllure) { %>
-        <a href="/allure-report?project=<%= project.id %>" class="btn" target="_blank">Open Allure Report ↗</a>
+          <a href="/allure-report?project=<%= project.id %>" class="btn" target="_blank" style="background-color:var(--brand-ochre);color:var(--text);border-color:var(--border-strong);margin-top:0.5rem;">Open Allure Report ↗</a>
         <% } %>
       </div>
     </div>
 
     <% if (run.healing) { %>
-    <div class="card">
-      <h3>Self-Healing</h3>
-      <table class="info-table">
-        <tr><td>Attempts</td><td><%= run.healing.healingAttempts ? run.healing.healingAttempts.length : 0 %></td></tr>
-        <tr><td>Healed</td><td><%= run.healing.totalHealed || 0 %></td></tr>
-        <tr><td>Remaining</td><td><%= run.healing.totalRemaining || 0 %></td></tr>
+    <div class="card card-lavender">
+      <h3>🛠️ Self-Healing Status</h3>
+      <table class="info-table" style="margin-bottom:1rem;">
+        <tr>
+          <td>Attempts</td>
+          <td><strong><%= run.healing.healingAttempts ? run.healing.healingAttempts.length : 0 %></strong></td>
+        </tr>
+        <tr>
+          <td>Healed</td>
+          <td><strong><%= run.healing.totalHealed || 0 %></strong></td>
+        </tr>
+        <tr>
+          <td>Remaining</td>
+          <td><strong><%= run.healing.totalRemaining || 0 %></strong></td>
+        </tr>
       </table>
-      <% if (run.healing.healingAttempts) { %>
-      <h4>Attempts</h4>
-      <% run.healing.healingAttempts.forEach(a => { %>
-      <div class="heal-attempt">
-        Attempt <%= a.attempt %>: <%= a.healed.length %> healed, <%= a.stillFailing.length %> remaining
-      </div>
-      <% }) %>
+      
+      <% if (run.healing.healingAttempts && run.healing.healingAttempts.length > 0) { %>
+        <h4 style="font-size:0.9rem;margin-top:1rem;margin-bottom:0.5rem;font-weight:600;">Healing Log</h4>
+        <% run.healing.healingAttempts.forEach(a => { %>
+          <div class="heal-attempt" style="margin-bottom:0.5rem;font-size:0.85rem;">
+            <strong>Attempt <%= a.attempt %></strong>: <%= a.healed ? a.healed.length : 0 %> auto-fixed, <%= a.stillFailing ? a.stillFailing.length : 0 %> failing.
+          </div>
+        <% }) %>
       <% } %>
     </div>
     <% } %>
   </div>
 
+  <!-- Right Side: Failures, Reports, Output -->
   <div class="col col-70">
     <% if (run.result.failedTests && run.result.failedTests.length > 0) { %>
-    <div class="card">
-      <h3>Failed Tests</h3>
-      <ul class="fail-list">
+    <div class="card card-peach">
+      <h3>❌ Failed Tests & Traces</h3>
+      <ul class="fail-list" style="padding-left:1.25rem;">
         <% run.result.failedTests.forEach(ft => { %>
-        <li><strong><%= ft.test || ft.file %></strong><br><%= ft.error ? ft.error.substring(0, 200) : 'No details' %></li>
+          <li style="margin-bottom:1rem;">
+            <strong style="font-family:var(--font-mono);font-size:0.9rem;color:var(--danger);"><%= ft.test || ft.file || 'Test failure' %></strong>
+            <% if (ft.error) { %>
+              <pre style="margin-top:0.5rem;background:rgba(255,255,255,0.4);border:1px solid rgba(0,0,0,0.1);padding:0.75rem;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:0.78rem;overflow-x:auto;white-space:pre-wrap;color:var(--text);"><%= ft.error %></pre>
+            <% } %>
+          </li>
         <% }) %>
       </ul>
     </div>
@@ -71,14 +118,27 @@
 
     <% if (run.report) { %>
     <div class="card">
-      <h3>Test Report</h3>
-      <div class="markdown-content"><%- run.report.replace(/\n/g, '<br>') %></div>
+      <h3>📝 Test Execution Report</h3>
+      <div id="run-report-md" style="display:none;"><%= run.report %></div>
+      <div class="markdown-content" id="run-report-rendered"></div>
     </div>
     <% } %>
 
     <div class="card">
-      <h3>Execution Output</h3>
-      <pre class="code-block"><%= run.result.output || 'No output captured' %></pre>
+      <h3>💻 Raw Execution Console Output</h3>
+      <pre class="code-block" style="font-size:0.78rem;max-height:400px;overflow-y:auto;"><%= run.result.output || 'No console output captured.' %></pre>
     </div>
   </div>
 </div>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const reportRaw = document.getElementById('run-report-md');
+  const reportRendered = document.getElementById('run-report-rendered');
+  if (reportRaw && reportRendered && typeof marked !== 'undefined') {
+    reportRendered.innerHTML = marked.parse(reportRaw.textContent || '');
+  }
+});
+</script>
+
+<% } %>

package/qa-dashboard/views/runs.ejs

@@ -4,61 +4,52 @@
 <div class="page-header">
   <h1>Execution Runs</h1>
   <div class="header-actions">
-    <span class="badge badge-project"><%= project.name %></span>
-    <a href="/analytics?project=<%= project.id %>" class="btn btn-sm">Analytics</a>
+    <span class="badge badge-project"><%= (typeof project !== 'undefined' && project && project.name) ? project.name : 'Unknown Project' %></span>
+    <a href="/analytics?project=<%= (typeof project !== 'undefined' && project) ? project.id : '' %>" class="btn btn-sm">Analytics</a>
   </div>
 </div>
 
-<% if (runs.length === 0) { %>
+<% if (typeof runs === 'undefined' || !runs || runs.length === 0) { %>
 <div class="empty-state">
-  <p>No test executions yet. Run the pipeline from the Stories page.</p>
-  <a href="/stories?project=<%= project.id %>" class="btn btn-primary">View Stories</a>
+  <p>No test executions yet. Run the pipeline from the Stories page to see executions here.</p>
+  <a href="/stories?project=<%= (typeof project !== 'undefined' && project) ? project.id : '' %>" class="btn btn-primary" style="margin-top:0.5rem;">View Stories</a>
 </div>
-<% } %>
+<% } else { %>
 
-<div class="run-list">
-  <% runs.forEach(r => { %>
-  <div class="run-card-wrapper <%= r.success ? 'run-passed' : 'run-failed' %>">
-    <a href="/runs/<%= r.id %>?project=<%= project.id %>" class="run-card-main">
-      <div class="run-icon"><%= r.success ? '✅' : '❌' %></div>
+<div class="run-list" style="display:flex;flex-direction:column;gap:1rem;">
+  <% (runs || []).forEach(r => { %>
+  <div class="run-card-wrapper <%= r.success ? 'run-passed' : (r.success === null ? 'run-pending' : 'run-failed') %>" 
+       style="display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-left:6px solid <%= r.success ? 'var(--success)' : (r.success === null ? 'var(--brand-ochre)' : 'var(--danger)') %>;border-radius:var(--radius-lg);padding:1.25rem;transition:transform 0.15s, border-color 0.15s;box-shadow:var(--shadow-1);"
+       onmouseover="this.style.transform='translateY(-2px)';this.style.borderColor='var(--border-strong)';"
+       onmouseout="this.style.transform='none';this.style.borderColor='var(--border)';">
+    
+    <a href="/runs/<%= r.id %>?project=<%= (typeof project !== 'undefined' && project) ? project.id : '' %>" class="run-card-main" style="display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--text);flex:1;">
+      <div class="run-icon" style="font-size:1.75rem;"><%= r.success ? '✅' : (r.success === null ? '⏳' : '❌') %></div>
       <div class="run-info">
-        <div class="run-name"><%= r.id %></div>
-        <div class="run-test"><%= r.testName %></div>
-        <div class="run-meta">
-          <%= r.success ? 'Passed' : 'Failed' %> · 
-          <%= r.duration ? (r.duration / 1000).toFixed(1) + 's' : 'N/A' %> ·
-          <%= r.failedCount %> failure(s) ·
-          <%= r.healedCount > 0 ? r.healedCount + ' healed' : 'no healing' %>
+        <div class="run-name" style="font-family:var(--font-display);font-weight:600;font-size:1.15rem;letter-spacing:-0.01em;"><%= (r.id || '').substring(0, 24) %>...</div>
+        <div class="run-test" style="font-family:var(--font-mono);font-size:0.85rem;color:var(--text-muted);margin:0.2rem 0;"><%= r.testName || 'Unknown Test' %></div>
+        <div class="run-meta" style="font-size:0.8rem;color:var(--text-disabled);font-weight:500;">
+          Status: <strong><%= r.success ? 'Passed' : (r.success === null ? 'Running / Pending' : 'Failed') %></strong> · 
+          Duration: <strong><%= r.duration ? (r.duration / 1000).toFixed(1) + 's' : 'N/A' %></strong> ·
+          Errors: <strong><%= typeof r.failedCount !== 'undefined' ? r.failedCount : 0 %></strong> ·
+          Healing: <strong><%= (typeof r.healedCount !== 'undefined' && r.healedCount > 0) ? r.healedCount + ' healed' : 'none' %></strong>
         </div>
       </div>
     </a>
-    <div class="run-actions">
+    
+    <div class="run-actions" style="display:flex;gap:0.5rem;align-items:center;margin-left:1.5rem;">
       <% if (r.hasReport) { %>
-      <a href="/export/report/<%= r.id %>?project=<%= project.id %>" class="btn btn-sm btn-primary" target="_blank">View Report</a>
-      <a href="/export/pdf/<%= r.id %>?project=<%= project.id %>" class="btn btn-sm">Download</a>
+      <a href="/export/report/<%= r.id %>?project=<%= (typeof project !== 'undefined' && project) ? project.id : '' %>" class="btn btn-sm btn-primary" target="_blank">HTML Report</a>
+      <a href="/export/pdf/<%= r.id %>?project=<%= (typeof project !== 'undefined' && project) ? project.id : '' %>" class="btn btn-sm">Raw TXT</a>
       <% } else { %>
-      <span class="run-no-report">⏳ No report</span>
+      <span class="run-no-report" style="color:var(--text-disabled);font-size:0.8rem;font-weight:500;">⏳ No Report</span>
       <% } %>
       <% if (r.hasAllure) { %>
-      <a href="/allure-report?project=<%= project.id %>" class="btn btn-sm" target="_blank">Allure Report</a>
+      <a href="/allure-report?project=<%= (typeof project !== 'undefined' && project) ? project.id : '' %>" class="btn btn-sm" target="_blank" style="background-color:var(--brand-ochre);color:var(--text);border-color:var(--border-strong);">Allure</a>
       <% } %>
     </div>
   </div>
   <% }) %>
 </div>
 
-<style>
-.run-card-wrapper {
-  display: flex; align-items: center; gap: 1rem;
-  background: var(--surface); border: 1px solid var(--border);
-  border-radius: var(--radius); padding: 0.75rem 1.25rem;
-  transition: border-color 0.2s;
-}
-.run-card-wrapper:hover { border-color: var(--primary); }
-.run-card-main {
-  display: flex; align-items: center; gap: 1rem;
-  text-decoration: none; color: var(--text); flex: 1;
-}
-.run-actions { display: flex; gap: 0.5rem; align-items: center; white-space: nowrap; }
-.run-no-report { color: var(--text-muted); font-size: 0.8rem; }
-</style>
+<% } %>

package/qa-dashboard/views/stories.ejs

@@ -6,48 +6,46 @@
   <span class="badge badge-project"><%= project.name %></span>
 </div>
 
+<% if (stories.length === 0) { %>
+<div class="empty-state">
+  <div style="font-size: 3rem; margin-bottom: 1rem;">📝</div>
+  <h3>Aucune User Story</h3>
+  <p>Ajoutez des fichiers Markdown <code>.md</code> dans le dossier <code>user-story/</code> de votre projet pour commencer.</p>
+</div>
+<% } else { %>
 <div class="story-list">
-  <% stories.forEach(s => { %>
-  <div class="story-card">
+  <% const cardColors = ['card-lavender', 'card-peach', 'card-cream']; %>
+  <% stories.forEach((s, idx) => { %>
+  <div class="story-card <%= cardColors[idx % cardColors.length] %>" style="margin-bottom:1.25rem;">
     <div class="story-header">
-      <a href="/stories/<%= s.name %>?project=<%= project.id %>" class="story-title"><%= s.name %></a>
+      <a href="/stories/<%= s.name %>?project=<%= project.id %>" class="story-title" style="text-decoration:none;font-weight:600;"><%= s.name %></a>
       <div class="story-badges">
         <% if (s.hasPlan) { %><span class="badge badge-plan">Planned</span><% } %>
         <% if (s.hasSpec) { %><span class="badge badge-spec">Tested</span><% } %>
         <% if (!s.hasPlan) { %><span class="badge badge-draft">Draft</span><% } %>
       </div>
     </div>
-    <div class="story-preview">
+    <div class="story-preview" style="margin:1rem 0;">
       <% if (s.content) { %>
-      <% const lines = s.content.split('\n').filter(l => l.startsWith('##') || l.startsWith('**')) %>
-      <% lines.slice(0, 3).forEach(l => { %><p><%= l.replace(/\*\*/g, '') %></p><% }) %>
+      <% const lines = s.content.split('\n').filter(l => l.startsWith('##') || l.startsWith('**') || l.startsWith('-') || l.trim().length > 0) %>
+      <% lines.slice(0, 3).forEach(l => { %>
+        <p style="margin:0.25rem 0;font-size:0.9rem;opacity:0.85;"><%= l.replace(/\*\*|##/g, '').substring(0, 100) %></p>
+      <% }) %>
       <% } %>
     </div>
-    <div class="story-actions">
-      <button class="btn btn-sm" onclick="runPipeline('<%= project.id %>', '<%= s.name %>', this)">Full Pipeline</button>
+    <div class="story-actions" style="border-top:1px solid var(--border);padding-top:1rem;display:flex;align-items:center;">
+      <button class="btn btn-sm btn-primary" onclick="runPipeline('<%= project.id %>', '<%= s.name %>')">▶ Execute Tests</button>
+      <a href="/stories/<%= s.name %>?project=<%= project.id %>" class="btn btn-sm" style="margin-left:0.5rem;">View Details</a>
       <span class="story-action-output"></span>
     </div>
   </div>
   <% }) %>
 </div>
+<% } %>
 
 <script>
-async function runPipeline(projectId, storyName, btn) {
-  btn.disabled = true;
-  btn.textContent = 'Running...';
-  const outputSpan = btn.parentElement.querySelector('.story-action-output');
-
-  const res = await fetch(`/stories/${encodeURIComponent(storyName)}/full-pipeline?project=${projectId}`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-  });
-  const data = await res.json();
-
-  outputSpan.textContent = data.success ? '✓ Done' : '✗ Failed';
-  outputSpan.className = data.success ? 'output-success' : 'output-error';
-  btn.disabled = false;
-  btn.textContent = 'Full Pipeline';
-
-  setTimeout(() => { outputSpan.textContent = ''; }, 5000);
+async function runPipeline(projectId, storyName) {
+  // Rediriger vers la page de détail avec l'instruction de lancement automatique
+  window.location.href = `/stories/${encodeURIComponent(storyName)}?project=${projectId}&autoRun=true`;
 }
 </script>

package/qa-dashboard/views/story.ejs

@@ -8,35 +8,45 @@
 
 <div class="row">
   <div class="col col-40">
-    <div class="card">
-      <h3>User Story</h3>
-      <div class="markdown-content"><%- story.content.replace(/\n/g, '<br>') %></div>
+    <div class="card card-cream">
+      <h3>📝 User Story</h3>
+      <div id="story-content-md" style="display:none;"><%= story.content %></div>
+      <div class="markdown-content" id="story-content-rendered"></div>
     </div>
 
     <div class="card">
-      <h3>Pipeline Controls</h3>
+      <h3>⚡ Pipeline Controls</h3>
+      <p style="color:var(--text-muted);font-size:0.85rem;margin-bottom:1rem;">Trigger step-by-step or launch the fully automated agentic sequence.</p>
       <div class="action-buttons-vertical">
-        <button class="btn btn-sm" onclick="triggerPlan('<%= story.name %>')">1. Generate Plan</button>
-        <button class="btn btn-sm" onclick="triggerGenerate('<%= story.name %>')">2. Generate Test Spec</button>
-        <button class="btn btn-sm" onclick="triggerExecute('<%= story.name %>')">3. Execute Tests</button>
-        <button class="btn btn-sm btn-primary" onclick="triggerFull('<%= story.name %>')">▶ Full Pipeline</button>
-        <a href="/runs?project=<%= project.id %>" class="btn btn-sm" style="margin-top:0.5rem;">View Test Results →</a>
+        <button class="btn btn-sm btn-primary" onclick="triggerExecute('<%= story.name %>')">▶ Execute Tests</button>
+        <a href="/runs?project=<%= project.id %>" class="btn btn-sm" style="margin-top:0.5rem;justify-content:center;">View Test Results →</a>
+      </div>
+      
+      <!-- Streaming console output box -->
+      <div id="pipeline-status" class="output-box" style="display:none;"></div>
+      
+      <!-- Neon loader pulse indicator -->
+      <div id="pipeline-pulse" class="terminal-pulse" style="display:none;margin-top:1rem;">
+        <span class="pulse-dot"></span>
+        <span class="pulse-dot"></span>
+        <span class="pulse-dot"></span>
+        <span class="pulse-text">AI Agent is running...</span>
       </div>
-      <div id="pipeline-status" class="output-box"></div>
     </div>
   </div>
 
   <div class="col col-60">
     <% if (story.plan) { %>
     <div class="card">
-      <h3>Test Plan <a href="/stories/<%= story.name %>?project=<%= project.id %>&tab=plan" class="btn btn-sm">Refresh</a></h3>
-      <div class="markdown-content"><%- story.plan.replace(/\n/g, '<br>') %></div>
+      <h3>📋 Test Plan <a href="/stories/<%= story.name %>?project=<%= project.id %>&tab=plan" class="btn btn-sm" style="margin-left:auto;">Refresh</a></h3>
+      <div id="story-plan-md" style="display:none;"><%= story.plan %></div>
+      <div class="markdown-content" id="story-plan-rendered"></div>
     </div>
     <% } %>
 
     <% if (story.spec) { %>
     <div class="card">
-      <h3>Test Spec: <%= story.specName %></h3>
+      <h3>🧪 Test Spec: <%= story.specName %></h3>
       <pre class="code-block"><%= story.spec %></pre>
     </div>
     <% } %>
@@ -44,20 +54,86 @@
 </div>
 
 <script>
+// Parse Markdown on Client-Side for extremely high-fidelity tables, checkmarks, list layout
+document.addEventListener('DOMContentLoaded', () => {
+  const contentRaw = document.getElementById('story-content-md');
+  const contentRendered = document.getElementById('story-content-rendered');
+  if (contentRaw && contentRendered) {
+    contentRendered.innerHTML = marked.parse(contentRaw.textContent || '');
+  }
+
+  const planRaw = document.getElementById('story-plan-md');
+  const planRendered = document.getElementById('story-plan-rendered');
+  if (planRaw && planRendered) {
+    planRendered.innerHTML = marked.parse(planRaw.textContent || '');
+  }
+});
+
 async function callPipeline(action, storyName) {
   const status = document.getElementById('pipeline-status');
-  status.textContent = `${action}...`;
+  const pulse = document.getElementById('pipeline-pulse');
+  
+  // Reset and show containers
+  status.style.display = 'block';
+  status.textContent = `🚀 Initializing QA agent action [${action}]...\n\n`;
   status.className = 'output-box output-running';
+  pulse.style.display = 'flex';
+
+  try {
+    const res = await fetch(`/stories/${encodeURIComponent(storyName)}/${action}?project=<%= project.id %>`, { method: 'POST' });
+    
+    if (!res.body) {
+      status.textContent += "\nError: The server did not return a readable stream.";
+      pulse.style.display = 'none';
+      return;
+    }
 
-  const res = await fetch(`/stories/${encodeURIComponent(storyName)}/${action}?project=<%= project.id %>`, { method: 'POST' });
-  const data = await res.json();
-  status.textContent = data.output || data.error || 'Done';
-  status.className = `output-box ${data.success ? 'output-success' : 'output-error'}`;
-  setTimeout(() => { if (data.success) location.reload(); }, 1500);
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder('utf-8');
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      
+      const chunk = decoder.decode(value, { stream: true });
+      status.textContent += chunk;
+      status.scrollTop = status.scrollHeight; // Force Autoscroll
+    }
+
+    // Hide pulse loader once done
+    pulse.style.display = 'none';
+
+    // Parse final status
+    const finishedText = status.textContent.toLowerCase();
+    if (finishedText.includes('[finished: success]')) {
+      status.className = 'output-box output-success';
+      // Reload page to reflect new plans/specs in EJS
+      setTimeout(() => { location.reload(); }, 2000);
+    } else {
+      status.className = 'output-box output-error';
+    }
+
+  } catch (error) {
+    status.textContent += `\n\nNetwork or server connection error: ${error.message}`;
+    status.className = 'output-box output-error';
+    pulse.style.display = 'none';
+  }
 }
 
 function triggerPlan(s) { callPipeline('plan', s); }
 function triggerGenerate(s) { callPipeline('generate', s); }
 function triggerExecute(s) { callPipeline('execute', s); }
 function triggerFull(s) { callPipeline('full-pipeline', s); }
+
+document.addEventListener('DOMContentLoaded', () => {
+  const urlParams = new URLSearchParams(window.location.search);
+  if (urlParams.get('autoRun') === 'true') {
+    // Nettoyer l'URL afin qu'un rechargement manuel ne relance pas le processus
+    const newUrl = window.location.pathname + '?project=' + urlParams.get('project');
+    window.history.replaceState({}, '', newUrl);
+    
+    // Déclencher l'exécution des tests
+    triggerExecute('<%= story.name %>');
+  }
+});
 </script>

package/qa-dashboard/views/test-data.ejs

@@ -19,43 +19,43 @@
 
 <div class="alerts" id="alert-container"></div>
 
-<div class="row">
-  <div class="col-40">
-    <div class="card">
-      <h3>Generate Test Data</h3>
-      <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem;">
-        Auto-generate realistic test data for your QA pipeline.
+<div class="row" style="margin-bottom:2rem;">
+  <div class="col col-40">
+    <div class="card card-lavender">
+      <h3>⚡ Generate Test Data</h3>
+      <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.25rem;">
+        Auto-generate realistic synthetic mock datasets for your QA pipeline.
       </p>
-      <form id="data-form">
+      <form id="data-form" class="form">
         <div class="form-group">
           <label>Data Type</label>
           <select id="data-type" class="form-input">
-            <option value="users">Users</option>
-            <option value="transactions">Transactions</option>
+            <option value="users">Users Accounts</option>
+            <option value="transactions">Transactions Logs</option>
           </select>
         </div>
         <div class="form-group">
           <label>Record Count</label>
           <input type="number" id="data-count" class="form-input" value="5" min="1" max="100">
         </div>
-        <button type="submit" class="btn btn-primary">Generate</button>
+        <button type="submit" class="btn btn-primary" style="width:100%;margin-top:0.5rem;">Generate Dataset</button>
       </form>
-      <div id="data-output" class="output-box" style="display:none;"></div>
+      <div id="data-output" class="output-box" style="display:none;margin-top:1rem;"></div>
     </div>
   </div>
-  <div class="col-60">
+  <div class="col col-60">
     <div class="card">
-      <h3>Generated Data Files</h3>
+      <h3>📂 Generated Data Files</h3>
       <% if (dataFiles.length === 0) { %>
       <div class="empty-state" style="padding:2rem 0;">
         <p>No data files generated yet</p>
       </div>
       <% } else { %>
       <table class="info-table">
-        <tr><th>File</th><th>Size</th><th>Modified</th><th></th></tr>
+        <tr><th>File Name</th><th>Size</th><th>Last Modified</th><th>Action</th></tr>
         <% dataFiles.sort((a,b) => new Date(b.modified) - new Date(a.modified)).forEach(f => { %>
         <tr>
-          <td><code><%= f.name %></code></td>
+          <td><code style="font-family:var(--font-mono);font-size:0.8rem;"><%= f.name %></code></td>
           <td><%= f.size > 1024 ? (f.size / 1024).toFixed(1) + ' KB' : f.size + ' B' %></td>
           <td><%= new Date(f.modified).toLocaleString() %></td>
           <td><button class="btn btn-sm btn-danger" onclick="deleteFile('<%= f.name %>')">Delete</button></td>
@@ -68,14 +68,14 @@
 </div>
 
 <div class="card">
-  <h3>About Test Data Management</h3>
-  <p style="color: var(--text-muted); font-size: 0.85rem;">
-    Generated test data is stored in <code>data/</code> as JSON files. These can be:
+  <h3>ℹ️ About Test Data Management</h3>
+  <p style="color: var(--text-muted); font-size: 0.88rem; line-height:1.5;">
+    Generated test data is stored directly in your connected project's <code>data/</code> folder as structured JSON files. These datasets can be easily:
   </p>
-  <ul style="color: var(--text-muted); font-size: 0.85rem; padding-left: 1.5rem; margin-top: 0.5rem;">
-    <li>Used by Playwright tests via <code>fs.readFileSync()</code></li>
-    <li>Imported into your test database for seeding</li>
-    <li>Downloaded and shared with your team</li>
+  <ul style="color: var(--text-muted); font-size: 0.88rem; padding-left: 1.5rem; margin-top: 0.5rem; line-height:1.6;">
+    <li>Read dynamically inside Playwright test scenarios using <code>fs.readFileSync()</code></li>
+    <li>Injected directly into a localized sandbox database before test suite runs</li>
+    <li>Exported or synced for cross-team quality assurance consistency</li>
   </ul>
 </div>
 
@@ -87,7 +87,7 @@ document.getElementById('data-form').addEventListener('submit', async (e) => {
   const output = document.getElementById('data-output');
 
   output.style.display = 'block';
-  output.textContent = 'Generating...';
+  output.textContent = 'Generating realistic mock data...';
   output.className = 'output-box output-running';
 
   const res = await fetch('/data/generate', {
@@ -108,7 +108,7 @@ document.getElementById('data-form').addEventListener('submit', async (e) => {
 });
 
 async function deleteFile(name) {
-  if (!confirm(`Delete ${name}?`)) return;
+  if (!confirm(`Are you sure you want to delete ${name}?`)) return;
   const res = await fetch('/data/' + encodeURIComponent(name), { method: 'DELETE' });
   const data = await res.json();
   if (data.success) location.reload();