@ai-qa/workflow 2.0.17 → 2.0.18

package/qa-dashboard/views/project.ejs

@@ -11,8 +11,8 @@
   </div>
 </div>
 
-<div class="project-detail" style="margin-bottom:2rem;">
-  <p class="project-path" style="font-family:var(--font-mono);color:var(--text-disabled);font-size:0.88rem;"><%= project.path %></p>
+<div style="margin-bottom:2rem;">
+  <p style="font-family:var(--font-mono);color:var(--text-disabled);font-size:0.88rem;"><%= project.path %></p>
 </div>
 
 <div class="row" style="margin-bottom:2rem;">
@@ -20,7 +20,6 @@
     <div class="card card-lavender">
       <h3>📝 User Stories</h3>
       <div class="big-number"><%= list.stories.length %></div>
-      <a href="/stories?project=<%= project.id %>" class="btn btn-sm" style="margin-top:1rem;">View Stories</a>
     </div>
   </div>
   <div class="col">
@@ -37,81 +36,109 @@
   </div>
 </div>
 
+<!-- ─── Liste des Stories avec Pipeline Status ─── -->
 <div class="card">
-  <h3>⚡ Pipeline Execution</h3>
-  <form id="pipeline-form" data-project="<%= project.id %>" class="form">
-    <div class="form-group">
-      <label>Select User Story to Run</label>
-      <select name="storyName" class="form-input">
-        <option value="">— Run status check / full suite —</option>
-        <% list.stories.forEach(s => { %>
-        <option value="<%= s %>"><%= s %></option>
-        <% }) %>
-      </select>
-    </div>
-    <button type="submit" class="btn btn-primary">Run Pipeline</button>
-  </form>
-  <div id="pipeline-output" class="output-box" style="display:none;"></div>
+  <h3>📋 Stories Pipeline</h3>
+  <% if (storiesWithStatus && storiesWithStatus.length > 0) { %>
+  <table class="info-table">
+    <thead>
+      <tr>
+        <th>User Story</th>
+        <th>Plan</th>
+        <th>Test</th>
+        <th>Run</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <% storiesWithStatus.forEach(s => { %>
+      <tr>
+        <td><a href="/stories/<%= s.name %>?project=<%= project.id %>" style="font-weight:600;"><%= s.baseName %></a></td>
+        <td><% if (s.hasPlan) { %><span class="badge badge-plan">✅</span><% } else { %><span class="badge badge-draft">—</span><% } %></td>
+        <td><% if (s.hasSpec) { %><span class="badge badge-spec">✅</span><% } else { %><span class="badge badge-draft">—</span><% } %></td>
+        <td><% if (s.hasRun) { %><span class="badge badge-pass">✅</span><% } else { %><span class="badge badge-draft">—</span><% } %></td>
+        <td>
+          <div style="display:flex;gap:0.4rem;flex-wrap:wrap;">
+            <button class="btn btn-sm" onclick="runPipelineAction('<%= project.id %>', '<%= s.name %>', 'plan')" <%= s.hasPlan ? 'disabled style="opacity:0.5;"' : '' %>>📋 Plan</button>
+            <button class="btn btn-sm" onclick="runPipelineAction('<%= project.id %>', '<%= s.name %>', 'generate')" <%= !s.hasPlan || s.hasSpec ? 'disabled style="opacity:0.5;"' : '' %>>🧪 Generate</button>
+            <button class="btn btn-sm btn-primary" onclick="runPipelineAction('<%= project.id %>', '<%= s.name %>', 'execute')" <%= !s.hasSpec ? 'disabled style="opacity:0.5;"' : '' %>>▶ Execute</button>
+            <a href="/stories/<%= s.name %>?project=<%= project.id %>" class="btn btn-sm">View →</a>
+          </div>
+        </td>
+      </tr>
+      <% }) %>
+    </tbody>
+  </table>
+  <% } else { %>
+    <p style="color:var(--text-muted);">Aucune user story trouvée. Ajoutez des fichiers <code>.md</code> dans <code>user-story/</code>.</p>
+  <% } %>
+  <div id="pipeline-stream-output" class="output-box" style="display:none;margin-top:1rem;"></div>
+  <div id="pipeline-stream-pulse" class="terminal-pulse" style="display:none;margin-top:0.75rem;">
+    <span class="pulse-dot"></span><span class="pulse-dot"></span><span class="pulse-dot"></span>
+    <span class="pulse-text">Running...</span>
+  </div>
 </div>
 
+<!-- ─── Quick Actions ─── -->
 <div class="card">
-  <h3>⚙️ Quick Actions</h3>
-  <p style="color:var(--text-muted);font-size:0.9rem;margin-bottom:1rem;">Manage, execute, or build standard reports for this project instantly.</p>
-  <div class="action-buttons">
-    <button class="btn btn-sm" onclick="runAction('<%= project.id %>', 'status')">Status</button>
-    <button class="btn btn-sm" onclick="runAction('<%= project.id %>', 'execute')">Execute All Tests</button>
-    <button class="btn btn-sm" onclick="runAction('<%= project.id %>', 'report')">Generate Report</button>
+  <h3>⚡ Orchestrator Actions</h3>
+  <div class="action-buttons" style="margin-bottom:1rem;">
+    <button class="btn btn-sm" onclick="runQuickAction('<%= project.id %>', 'status')">📊 Status</button>
+    <button class="btn btn-sm btn-primary" onclick="runQuickAction('<%= project.id %>', 'report')">📝 Generate Report</button>
+    <% if (hasAllure) { %>
+    <a href="/allure-report?project=<%= project.id %>" class="btn btn-sm" target="_blank">📈 Allure Report</a>
+    <% } %>
+    <a href="/export/report/latest?project=<%= project.id %>" class="btn btn-sm" target="_blank">📥 Download Latest Report</a>
   </div>
   <div id="quick-output" class="output-box" style="display:none;"></div>
 </div>
 
 <script>
-document.getElementById('pipeline-form').addEventListener('submit', async (e) => {
-  e.preventDefault();
-  const form = e.target;
-  const projectId = form.dataset.project;
-  const formData = new FormData(form);
-  const output = document.getElementById('pipeline-output');
-  
+async function runPipelineAction(projectId, storyName, action) {
+  const output = document.getElementById('pipeline-stream-output');
+  const pulse = document.getElementById('pipeline-stream-pulse');
   output.style.display = 'block';
-  output.textContent = 'Running pipeline...';
+  output.textContent = `🚀 Running ${action} for ${storyName}...\n`;
   output.className = 'output-box output-running';
+  pulse.style.display = 'flex';
 
   try {
-    const res = await fetch(`/projects/${projectId}/run-pipeline`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ storyName: formData.get('storyName') })
-    });
-    if (!res.ok) throw new Error(`HTTP Error ${res.status}`);
-    const data = await res.json();
-    output.textContent = data.output || data.error || 'Done';
-    output.className = `output-box ${data.success ? 'output-success' : 'output-error'}`;
+    const res = await fetch(`/stories/${encodeURIComponent(storyName)}/${action}?project=${projectId}`, { method: 'POST' });
+    if (!res.body) { output.textContent += '\nError: No response stream'; pulse.style.display = 'none'; return; }
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder('utf-8');
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      output.textContent += decoder.decode(value, { stream: true });
+      output.scrollTop = output.scrollHeight;
+    }
+    pulse.style.display = 'none';
+    output.className = output.textContent.toLowerCase().includes('finished: success') ? 'output-box output-success' : 'output-box output-error';
+    if (output.textContent.toLowerCase().includes('finished: success')) {
+      setTimeout(() => location.reload(), 2000);
+    }
   } catch (err) {
-    output.textContent = 'Network or server error: ' + err.message;
+    output.textContent += `\nError: ${err.message}`;
     output.className = 'output-box output-error';
+    pulse.style.display = 'none';
   }
-});
+}
 
-async function runAction(projectId, action) {
+async function runQuickAction(projectId, action) {
   const output = document.getElementById('quick-output');
   output.style.display = 'block';
   output.textContent = `Running ${action}...`;
   output.className = 'output-box output-running';
-
   try {
-    const res = await fetch(`/projects/${projectId}/${action}`, { 
-      method: 'POST', 
-      headers: { 'Content-Type': 'application/json' }, 
-      body: '{}' 
-    });
+    const res = await fetch(`/projects/${projectId}/${action}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: '{}' });
     if (!res.ok) throw new Error(`HTTP Error ${res.status}`);
     const data = await res.json();
     output.textContent = data.output || data.error || 'Done';
     output.className = `output-box ${data.success ? 'output-success' : 'output-error'}`;
   } catch (err) {
-    output.textContent = 'Network or server error: ' + err.message;
+    output.textContent = 'Error: ' + err.message;
     output.className = 'output-box output-error';
   }
 }
-</script>
+</script>

package/qa-dashboard/views/run.ejs

@@ -56,14 +56,19 @@
     <div class="card">
       <h3>📂 Report Actions</h3>
       <div class="action-buttons-vertical">
+        <button class="btn btn-sm btn-primary" onclick="rerunRun('<%= project.id %>', '<%= run.id %>')" style="margin-bottom:0.5rem;">🔄 Rerun This Test</button>
         <% if (run.report) { %>
-          <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>
+          <a href="/export/report/<%= run.id %>?project=<%= project.id %>" class="btn btn-sm" target="_blank">📥 Export HTML Report</a>
+          <a href="/export/pdf/<%= run.id %>?project=<%= project.id %>" class="btn btn-sm">📥 Download Raw (.txt)</a>
         <% } else { %>
           <p style="color:var(--text-disabled);font-size:0.85rem;margin-bottom:0.5rem;">No summary report generated yet.</p>
         <% } %>
+        <button class="btn btn-sm" onclick="generateReport('<%= project.id %>', '<%= run.id %>')" style="margin-top:0.25rem;">📝 Generate Report</button>
         <% if (run.hasAllure) { %>
-          <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>
+          <a href="/allure-report?project=<%= project.id %>" class="btn btn-sm" target="_blank" style="background-color:var(--brand-ochre);color:var(--text);border-color:var(--border-strong);margin-top:0.5rem;">📈 Open Allure Report ↗</a>
+          <button class="btn btn-sm" onclick="regenerateAllure('<%= project.id %>')" style="margin-top:0.25rem;">🔄 Regenerate Allure</button>
+        <% } else { %>
+          <button class="btn btn-sm" onclick="regenerateAllure('<%= project.id %>')" style="margin-top:0.25rem;">📈 Generate Allure Report</button>
         <% } %>
       </div>
     </div>
@@ -139,6 +144,61 @@ document.addEventListener('DOMContentLoaded', () => {
     reportRendered.innerHTML = marked.parse(reportRaw.textContent || '');
   }
 });
+
+async function rerunRun(projectId, runId) {
+  if (!confirm('Rerun this test?')) return;
+  const output = document.querySelector('.output-box') || document.createElement('div');
+  output.textContent = '🔄 Rerunning...';
+  output.className = 'output-box output-running';
+  output.style.display = 'block';
+  try {
+    const res = await fetch(`/runs/${runId}/rerun?project=${projectId}`, { method: 'POST' });
+    const data = await res.json();
+    output.textContent = data.output || data.error || 'Done';
+    output.className = `output-box ${data.success ? 'output-success' : 'output-error'}`;
+    if (data.success && data.runId) {
+      output.textContent += `\n\nNew run: ${data.runId}`;
+      setTimeout(() => { window.location.href = `/runs/${data.runId}?project=${projectId}`; }, 2000);
+    }
+  } catch (err) {
+    output.textContent = 'Error: ' + err.message;
+    output.className = 'output-box output-error';
+  }
+}
+
+async function generateReport(projectId, runId) {
+  const output = document.querySelector('.output-box') || document.createElement('div');
+  output.textContent = '📝 Generating report...';
+  output.className = 'output-box output-running';
+  output.style.display = 'block';
+  try {
+    const res = await fetch(`/projects/${projectId}/report`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ runId }) });
+    const data = await res.json();
+    output.textContent = data.output || data.error || 'Done';
+    output.className = `output-box ${data.success ? 'output-success' : 'output-error'}`;
+    if (data.success) setTimeout(() => location.reload(), 1500);
+  } catch (err) {
+    output.textContent = 'Error: ' + err.message;
+    output.className = 'output-box output-error';
+  }
+}
+
+async function regenerateAllure(projectId) {
+  const output = document.querySelector('.output-box') || document.createElement('div');
+  output.textContent = '📈 Regenerating Allure report...';
+  output.className = 'output-box output-running';
+  output.style.display = 'block';
+  try {
+    const res = await fetch(`/runs/allure-regenerate?project=${projectId}`, { method: 'POST' });
+    const data = await res.json();
+    output.textContent = data.output || data.error || 'Done';
+    output.className = `output-box ${data.success ? 'output-success' : 'output-error'}`;
+    if (data.success) setTimeout(() => location.reload(), 1500);
+  } catch (err) {
+    output.textContent = 'Error: ' + err.message;
+    output.className = 'output-box output-error';
+  }
+}
 </script>
 
 <% } %>

package/qa-dashboard/views/stories.ejs

@@ -18,11 +18,11 @@
   <% 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" style="text-decoration:none;font-weight:600;"><%= s.name %></a>
+      <a href="/stories/<%= s.name %>?project=<%= project.id %>" class="story-title" style="text-decoration:none;font-weight:600;"><%= s.name.replace('.md', '') %></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><% } %>
+        <% if (s.hasPlan && s.hasSpec) { %><span class="badge badge-spec">✅ Planned & Tested</span>
+        <% } else if (s.hasPlan) { %><span class="badge badge-plan">📋 Planned</span>
+        <% } else { %><span class="badge badge-draft">📝 Draft</span><% } %>
       </div>
     </div>
     <div class="story-preview" style="margin:1rem 0;">
@@ -33,10 +33,14 @@
       <% }) %>
       <% } %>
     </div>
-    <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 class="story-actions" style="border-top:1px solid var(--border);padding-top:1rem;">
+      <div style="display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;">
+        <button class="btn btn-sm" onclick="callPipelineAction('<%= project.id %>', '<%= s.name %>', 'plan')" <%= s.hasPlan ? 'disabled style="opacity:0.5;"' : '' %>>📋 Plan</button>
+        <button class="btn btn-sm" onclick="callPipelineAction('<%= project.id %>', '<%= s.name %>', 'generate')" <%= !s.hasPlan || s.hasSpec ? 'disabled style="opacity:0.5;"' : '' %>>🧪 Generate</button>
+        <button class="btn btn-sm btn-primary" onclick="callPipelineAction('<%= project.id %>', '<%= s.name %>', 'execute')" <%= !s.hasSpec ? 'disabled style="opacity:0.5;"' : '' %>>▶ Execute</button>
+        <a href="/stories/<%= s.name %>?project=<%= project.id %>" class="btn btn-sm">View Details →</a>
+      </div>
+      <div class="story-action-output" style="margin-top:0.5rem;"></div>
     </div>
   </div>
   <% }) %>
@@ -44,8 +48,28 @@
 <% } %>
 
 <script>
-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`;
+async function callPipelineAction(projectId, storyName, action) {
+  const card = event.target.closest('.story-card');
+  const outputDiv = card.querySelector('.story-action-output');
+  outputDiv.innerHTML = `<div class="output-box output-running" style="margin-top:0.5rem;padding:0.75rem;font-size:0.8rem;max-height:200px;">🚀 Running ${action}...</div>`;
+
+  try {
+    const res = await fetch(`/stories/${encodeURIComponent(storyName)}/${action}?project=${projectId}`, { method: 'POST' });
+    if (!res.body) { outputDiv.innerHTML = '<div class="output-box output-error" style="margin-top:0.5rem;padding:0.75rem;font-size:0.8rem;">Error: No stream</div>'; return; }
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder('utf-8');
+    let text = '';
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      text += decoder.decode(value, { stream: true });
+      outputDiv.innerHTML = `<div class="output-box output-running" style="margin-top:0.5rem;padding:0.75rem;font-size:0.8rem;max-height:200px;overflow-y:auto;">${text.replace(/\n/g, '<br>')}</div>`;
+    }
+    const isSuccess = text.toLowerCase().includes('finished: success');
+    outputDiv.innerHTML = `<div class="output-box ${isSuccess ? 'output-success' : 'output-error'}" style="margin-top:0.5rem;padding:0.75rem;font-size:0.8rem;max-height:200px;overflow-y:auto;">${text.replace(/\n/g, '<br>')}</div>`;
+    if (isSuccess) setTimeout(() => location.reload(), 2000);
+  } catch (err) {
+    outputDiv.innerHTML = `<div class="output-box output-error" style="margin-top:0.5rem;padding:0.75rem;font-size:0.8rem;">Error: ${err.message}</div>`;
+  }
 }
-</script>
+</script>

package/qa-dashboard/views/story.ejs

@@ -2,138 +2,177 @@
 <% title = story.name %>
 
 <div class="page-header">
-  <h1><%= story.name %></h1>
+  <h1><%= story.name.replace('.md', '') %></h1>
   <span class="badge badge-project"><%= project.name %></span>
 </div>
 
-<div class="row">
-  <div class="col col-40">
-    <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>
+<!-- ─── Phase Workflow Buttons ─── -->
+<div class="card" style="margin-bottom:1.5rem;">
+  <h3>⚡ Pipeline Workflow</h3>
+  <p style="color:var(--text-muted);font-size:0.85rem;margin-bottom:1rem;">Execute each phase in order. Verify the output before proceeding to the next step.</p>
+  <div style="display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center;">
+    <button class="btn btn-sm" id="btn-plan" onclick="triggerPhase('plan')" <%= story.plan ? 'disabled style="opacity:0.5;"' : '' %>>
+      <%= story.plan ? '✅ Planned' : '📋 1. Plan' %>
+    </button>
+    <span style="color:var(--text-disabled);">→</span>
+    <button class="btn btn-sm" id="btn-generate" onclick="triggerPhase('generate')" <%= !story.plan || story.spec ? 'disabled style="opacity:0.5;"' : '' %>>
+      <%= story.spec ? '✅ Generated' : '🧪 2. Generate' %>
+    </button>
+    <span style="color:var(--text-disabled);">→</span>
+    <button class="btn btn-sm btn-primary" id="btn-execute" onclick="triggerPhase('execute')" <%= !story.spec ? 'disabled style="opacity:0.5;"' : '' %>>
+      ▶ 3. Execute
+    </button>
+    <span style="color:var(--text-disabled);">→</span>
+    <button class="btn btn-sm" id="btn-report" onclick="triggerPhase('report')" <%= !story.hasRun ? 'disabled style="opacity:0.5;"' : '' %>>
+      📊 4. Report
+    </button>
+    <% if (story.hasAllure) { %>
+    <a href="/allure-report?project=<%= project.id %>" class="btn btn-sm" target="_blank" style="background-color:var(--brand-ochre);">📈 Allure</a>
+    <% } %>
+  </div>
+  <div id="pulse-indicator" 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 running...</span>
+  </div>
+  <div id="phase-output" class="output-box" style="display:none;margin-top:1rem;"></div>
+</div>
 
-    <div class="card">
-      <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 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>
+<!-- ─── Tabs: Story | Test Plan | Test Code | Results ─── -->
+<div class="card">
+  <div style="display:flex;gap:1rem;border-bottom:2px solid var(--border);margin-bottom:1.5rem;padding-bottom:0.5rem;">
+    <button class="btn btn-sm tab-btn active-tab" data-tab="story-tab" style="border-bottom:2px solid var(--primary);border-radius:0;">📝 Story</button>
+    <button class="btn btn-sm tab-btn" data-tab="plan-tab" style="border-radius:0;">📋 Test Plan</button>
+    <button class="btn btn-sm tab-btn" data-tab="spec-tab" style="border-radius:0;">🧪 Test Code</button>
+    <button class="btn btn-sm tab-btn" data-tab="results-tab" style="border-radius:0;">⚡ Results</button>
+  </div>
+
+  <!-- Tab: Story Content -->
+  <div id="story-tab" class="tab-content">
+    <div id="story-content-md" style="display:none;"><%= story.content %></div>
+    <div class="markdown-content" id="story-content-rendered"></div>
   </div>
 
-  <div class="col col-60">
+  <!-- Tab: Test Plan -->
+  <div id="plan-tab" class="tab-content" style="display:none;">
     <% if (story.plan) { %>
-    <div class="card">
-      <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>
+    <% } else { %>
+      <div class="empty-state" style="padding:2rem;">
+        <p>No test plan yet. Click <strong>"📋 1. Plan"</strong> above to generate one.</p>
+      </div>
     <% } %>
+  </div>
 
+  <!-- Tab: Test Code -->
+  <div id="spec-tab" class="tab-content" style="display:none;">
     <% if (story.spec) { %>
-    <div class="card">
-      <h3>🧪 Test Spec: <%= story.specName %></h3>
-      <pre class="code-block"><%= story.spec %></pre>
-    </div>
+      <pre class="code-block" style="max-height:500px;"><%= story.spec %></pre>
+      <div style="margin-top:1rem;">
+        <a href="/data?project=<%= project.id %>" class="btn btn-sm">View All Test Files</a>
+      </div>
+    <% } else { %>
+      <div class="empty-state" style="padding:2rem;">
+        <p>No test code yet. Complete the <strong>Plan</strong> phase first, then click <strong>"🧪 2. Generate"</strong>.</p>
+      </div>
+    <% } %>
+  </div>
+
+  <!-- Tab: Results -->
+  <div id="results-tab" class="tab-content" style="display:none;">
+    <% if (story.results && story.results.length > 0) { %>
+      <table class="info-table">
+        <thead><tr><th>Run</th><th>Status</th><th>Duration</th><th>Passed</th><th>Failed</th><th>Actions</th></tr></thead>
+        <tbody>
+          <% story.results.slice(0, 5).forEach(r => { %>
+          <tr>
+            <td><%= r.id.substring(0, 20) %></td>
+            <td><%= r.success ? '✅ Passed' : (r.success === null ? '⏳ Running' : '❌ Failed') %></td>
+            <td><%= r.duration ? (r.duration / 1000).toFixed(1) + 's' : 'N/A' %></td>
+            <td><%= r.passedCount %></td>
+            <td><%= r.failedCount %></td>
+            <td><a href="/runs/<%= r.id %>?project=<%= project.id %>" class="btn btn-sm">View</a></td>
+          </tr>
+          <% }) %>
+        </tbody>
+      </table>
+      <div style="margin-top:1rem;">
+        <a href="/runs?project=<%= project.id %>" class="btn btn-sm">All Runs →</a>
+        <a href="/export/report/latest?project=<%= project.id %>" class="btn btn-sm" target="_blank">📥 Download Report</a>
+      </div>
+    <% } else { %>
+      <div class="empty-state" style="padding:2rem;">
+        <p>No execution results yet. Click <strong>"▶ 3. Execute"</strong> above to run the tests.</p>
+      </div>
     <% } %>
   </div>
 </div>
 
 <script>
-// Parse Markdown on Client-Side for extremely high-fidelity tables, checkmarks, list layout
+// ─── Tab switching ───
 document.addEventListener('DOMContentLoaded', () => {
+  // Render markdown
   const contentRaw = document.getElementById('story-content-md');
   const contentRendered = document.getElementById('story-content-rendered');
-  if (contentRaw && contentRendered) {
+  if (contentRaw && contentRendered && typeof marked !== 'undefined') {
     contentRendered.innerHTML = marked.parse(contentRaw.textContent || '');
   }
-
   const planRaw = document.getElementById('story-plan-md');
   const planRendered = document.getElementById('story-plan-rendered');
-  if (planRaw && planRendered) {
+  if (planRaw && planRendered && typeof marked !== 'undefined') {
     planRendered.innerHTML = marked.parse(planRaw.textContent || '');
   }
+
+  // Tab click handlers
+  document.querySelectorAll('.tab-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.tab-btn').forEach(b => { b.style.borderBottom = '2px solid transparent'; b.style.color = 'var(--text-muted)'; });
+      btn.style.borderBottom = '2px solid var(--primary)';
+      btn.style.color = 'var(--text)';
+      document.querySelectorAll('.tab-content').forEach(tc => tc.style.display = 'none');
+      document.getElementById(btn.dataset.tab).style.display = 'block';
+    });
+  });
 });
 
-async function callPipeline(action, storyName) {
-  const status = document.getElementById('pipeline-status');
-  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';
+// ─── Phase execution ───
+async function triggerPhase(action) {
+  const output = document.getElementById('phase-output');
+  const pulse = document.getElementById('pulse-indicator');
+  output.style.display = 'block';
+  output.textContent = `🚀 Running ${action}...\n`;
+  output.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/<%= story.name %>/${action}?project=<%= project.id %>`, { method: 'POST' });
+    if (!res.body) { output.textContent += '\nError: No stream'; pulse.style.display = 'none'; return; }
     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
+      output.textContent += decoder.decode(value, { stream: true });
+      output.scrollTop = output.scrollHeight;
     }
-
-    // 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';
+    const isSuccess = output.textContent.toLowerCase().includes('finished: success');
+    output.className = `output-box ${isSuccess ? 'output-success' : 'output-error'}`;
+    if (isSuccess) setTimeout(() => location.reload(), 2000);
+  } catch (err) {
+    output.textContent += `\nError: ${err.message}`;
+    output.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); }
-
+// ─── Auto-execute on load ───
 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 %>');
+    triggerPhase('execute');
   }
 });
-</script>
+</script>