@ai-qa/workflow 2.0.16 → 2.0.18

package/qa-dashboard/views/terminal.ejs

@@ -0,0 +1,101 @@
+<% layout = 'layouts/main' %>
+<% title = 'Terminal' %>
+
+<div class="page-header">
+  <h1>🖥️ Terminal</h1>
+  <div class="header-actions">
+    <% if (typeof projects !== 'undefined' && projects.length > 1) { %>
+    <select id="project-select" class="form-input" style="width:auto;" onchange="window.location='/terminal?project='+this.value">
+      <% projects.forEach(p => { %>
+      <option value="<%= p.id %>" <%= project && project.id === p.id ? 'selected' : '' %>><%= p.name %></option>
+      <% }) %>
+    </select>
+    <% } %>
+    <button class="btn btn-sm btn-danger" onclick="clearTerminal()">🗑️ Clear</button>
+  </div>
+</div>
+
+<div class="card">
+  <h3>⚡ Quick Commands</h3>
+  <div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem;">
+    <button class="btn btn-sm" onclick="runCommand('npx playwright test')">▶ Run All Tests</button>
+    <button class="btn btn-sm" onclick="runCommand('npm run qa:report')">📝 Generate Report</button>
+    <button class="btn btn-sm" onclick="runCommand('npx allure generate allure-results --clean -o allure-report')">📈 Generate Allure</button>
+    <button class="btn btn-sm" onclick="runCommand('npm run qa:status')">📊 Status</button>
+    <button class="btn btn-sm" onclick="runCommand('npx playwright show-report')">📋 Open HTML Report</button>
+  </div>
+  <form id="terminal-form" style="display:flex;gap:0.5rem;">
+    <input type="text" id="cmd-input" class="form-input" placeholder="Enter a command (e.g., npx playwright test)" style="flex:1;font-family:var(--font-mono);font-size:0.85rem;" autofocus>
+    <button type="submit" class="btn btn-primary" style="white-space:nowrap;">▶ Run</button>
+  </form>
+</div>
+
+<div class="card" style="padding:0;overflow:hidden;">
+  <div style="background:var(--surface-dark);padding:0.75rem 1.25rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-strong);">
+    <span style="color:#e5e7eb;font-family:var(--font-mono);font-size:0.8rem;font-weight:600;">Console Output</span>
+    <span id="terminal-status" style="color:var(--text-disabled);font-family:var(--font-mono);font-size:0.75rem;">Ready</span>
+  </div>
+  <pre id="terminal-output" class="code-block" style="border:none;border-radius:0;max-height:500px;min-height:200px;margin:0;font-size:0.8rem;"><%= project ? `Ready — project: ${project.name}\nType a command or click a quick action above.` : 'No project configured.' %></pre>
+</div>
+
+<script>
+document.getElementById('terminal-form').addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const cmd = document.getElementById('cmd-input').value.trim();
+  if (!cmd) return;
+  runCommand(cmd);
+});
+
+async function runCommand(command) {
+  const output = document.getElementById('terminal-output');
+  const status = document.getElementById('terminal-status');
+  const input = document.getElementById('cmd-input');
+
+  output.textContent += `\n\n$ ${command}\n`;
+  status.textContent = '⏳ Running...';
+  output.scrollTop = output.scrollHeight;
+
+  try {
+    const res = await fetch('/terminal/run?project=<%= project ? project.id : '' %>', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ command }),
+    });
+
+    if (!res.body) {
+      output.textContent += 'Error: No response stream\n';
+      status.textContent = '❌ Error';
+      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;
+    }
+
+    const lastLine = output.textContent.split('\n').pop() || '';
+    if (lastLine.includes('SUCCESS')) {
+      status.textContent = '✅ Completed';
+    } else if (lastLine.includes('FAILED')) {
+      status.textContent = '❌ Failed';
+    } else {
+      status.textContent = '✅ Done';
+    }
+
+    if (input) input.value = '';
+  } catch (err) {
+    output.textContent += `\nConnection error: ${err.message}\n`;
+    status.textContent = '❌ Error';
+  }
+}
+
+function clearTerminal() {
+  document.getElementById('terminal-output').textContent = 'Terminal cleared.';
+  document.getElementById('terminal-status').textContent = 'Ready';
+}
+</script>

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

@@ -2,7 +2,7 @@
 <% title = project ? 'Test Data - ' + project.name : 'Test Data Management' %>
 
 <div class="page-header">
-  <h1>Test Data Management</h1>
+  <h1>Test Data & Artifacts</h1>
   <div class="header-actions">
     <% if (typeof projects !== 'undefined' && projects.length > 1) { %>
     <select id="project-select" class="form-input" style="width:auto;" onchange="window.location='/data?project='+this.value">
@@ -17,14 +17,53 @@
   </div>
 </div>
 
-<div class="alerts" id="alert-container"></div>
+<% if (project) { %>
+<!-- ─── Test Specs ─── -->
+<% if (testSpecs && testSpecs.length > 0) { %>
+<div class="card card-lavender">
+  <h3>🧪 Test Spec Files <span class="badge badge-project" style="margin-left:0.5rem;"><%= testSpecs.length %></span></h3>
+  <% testSpecs.forEach(spec => { %>
+  <details style="margin-bottom:0.75rem;border:1px solid var(--border);border-radius:var(--radius-md);padding:0.75rem;">
+    <summary style="cursor:pointer;font-weight:600;font-family:var(--font-mono);font-size:0.9rem;">
+      <%= spec.name %>
+      <a href="/data/spec/<%= spec.name %>?project=<%= project.id %>" class="btn btn-sm" style="margin-left:0.5rem;" download>📥 Download</a>
+      <a href="/stories?project=<%= project.id %>" class="btn btn-sm">▶ Execute</a>
+    </summary>
+    <pre class="code-block" style="margin-top:0.75rem;max-height:400px;font-size:0.75rem;"><%= spec.content %></pre>
+  </details>
+  <% }) %>
+</div>
+<% } else { %>
+<div class="card">
+  <h3>🧪 Test Spec Files</h3>
+  <p style="color:var(--text-muted);">Aucun fichier de test trouvé. Générez des tests depuis la page <a href="/stories?project=<%= project.id %>">Stories</a>.</p>
+</div>
+<% } %>
 
+<!-- ─── Test Plans ─── -->
+<% if (testPlans && testPlans.length > 0) { %>
+<div class="card card-peach">
+  <h3>📋 Test Plan Files <span class="badge badge-project" style="margin-left:0.5rem;"><%= testPlans.length %></span></h3>
+  <% testPlans.forEach(plan => { %>
+  <details style="margin-bottom:0.75rem;border:1px solid var(--border);border-radius:var(--radius-md);padding:0.75rem;">
+    <summary style="cursor:pointer;font-weight:600;font-family:var(--font-mono);font-size:0.9rem;">
+      <%= plan.name %>
+      <a href="/data/plan/<%= plan.name %>?project=<%= project.id %>" class="btn btn-sm" style="margin-left:0.5rem;" download>📥 Download</a>
+    </summary>
+    <div class="markdown-content" style="margin-top:0.75rem;font-size:0.85rem;" data-md="<%= encodeURIComponent(plan.content) %>"></div>
+  </details>
+  <% }) %>
+</div>
+<% } %>
+<% } %>
+
+<!-- ─── Generate Test Data ─── -->
 <div class="row" style="margin-bottom:2rem;">
   <div class="col col-40">
-    <div class="card card-lavender">
+    <div class="card card-cream">
       <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.
+        Auto-generate synthetic mock datasets for your QA pipeline.
       </p>
       <form id="data-form" class="form">
         <div class="form-group">
@@ -68,15 +107,11 @@
 </div>
 
 <div class="card">
-  <h3>ℹ️ About Test Data Management</h3>
+  <h3>ℹ️ About Test Data</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:
+    Test spec files (<code>.spec.ts</code>) and plans (<code>.md</code>) are read directly from your project. 
+    Generated datasets are stored in <code>qa-dashboard/data/</code> as JSON files.
   </p>
-  <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>
 
 <script>
@@ -85,18 +120,11 @@ document.getElementById('data-form').addEventListener('submit', async (e) => {
   const type = document.getElementById('data-type').value;
   const count = document.getElementById('data-count').value;
   const output = document.getElementById('data-output');
-
   output.style.display = 'block';
-  output.textContent = 'Generating realistic mock data...';
+  output.textContent = 'Generating...';
   output.className = 'output-box output-running';
-
-  const res = await fetch('/data/generate', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ type, count })
-  });
+  const res = await fetch('/data/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ type, count }) });
   const data = await res.json();
-
   if (data.success) {
     output.textContent = `Generated ${data.count} records → ${data.file}`;
     output.className = 'output-box output-success';
@@ -108,10 +136,19 @@ document.getElementById('data-form').addEventListener('submit', async (e) => {
 });
 
 async function deleteFile(name) {
-  if (!confirm(`Are you sure you want to delete ${name}?`)) return;
+  if (!confirm(`Delete ${name}?`)) return;
   const res = await fetch('/data/' + encodeURIComponent(name), { method: 'DELETE' });
   const data = await res.json();
   if (data.success) location.reload();
   else alert('Delete failed');
 }
-</script>
+
+// Render markdown for plans
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('[data-md]').forEach(el => {
+    if (typeof marked !== 'undefined') {
+      el.innerHTML = marked.parse(decodeURIComponent(el.dataset.md));
+    }
+  });
+});
+</script>

package/router.md

@@ -39,38 +39,45 @@ Once the user provides a user story or testing request, follow this workflow. **
 
 ### Phase 1: Plan & Explore
 User says: *"Plan tests for this user story"*
-1. Read `.github/agents/playwright-test-planner.agent.md`
-2. Explore the app with Playwright MCP
-3. Write test plan to `specs/`
-4. **STOP** — present the plan to the user
-5. Wait for approval before continuing
+1. Read `.github/agents/playwright-test-planner.agent.md` (or `.opencode/agents/qa-planner.md`)
+2. Read `.opencode/qa-workflow-skill.md` for project context and conventions
+3. Explore the app with Playwright MCP
+4. Write test plan to `specs/`
+5. **STOP** — present the plan to the user
+6. Wait for approval before continuing
 
 ### Phase 2: Generate Tests
 User says: *"Generate tests from the plan"*
-1. Read `.github/agents/playwright-test-generator.agent.md`
-2. Read `prompts/QAe2eprompt.md` for conventions
-3. Write Playwright test files to `tests/`
-4. **STOP** — present the generated tests to the user
-5. Wait for approval before executing
+1. Read `.github/agents/playwright-test-generator.agent.md` (or `.opencode/agents/qa-generator.md`)
+2. Read `.opencode/qa-workflow-skill.md` for Allure/Applitools/reporter setup
+3. Read `prompts/QAe2eprompt.md` for conventions
+4. Write Playwright test files to `tests/`
+5. **STOP** — present the generated tests to the user
+6. Wait for approval before executing
 
 ### Phase 3: Execute
 User says: *"Execute the tests"*
 1. User runs `npm run qa:execute` (or you suggest it)
 2. Check results — did they pass or fail?
+3. Allure results are auto-generated in `allure-results/`
+4. View dashboard: `npm run dashboard` → `http://localhost:4000`
 
 ### Phase 4: Heal Failures
 If tests fail, user says: *"Fix the failing tests"*
-1. Read `.github/agents/playwright-test-healer.agent.md`
-2. Debug with Playwright MCP (`test_debug`, `browser_snapshot`, etc.)
-3. Present diagnosis to the user (root cause + proposed 1-3 line fix)
-4. **STOP** — wait for user to approve the fix
-5. Apply fix and re-run
-6. If still failing, mark `test.fixme()` and classify as defect
+1. Read `.github/agents/playwright-test-healer.agent.md` (or `.opencode/agents/qa-healer.md`)
+2. Read `.opencode/qa-workflow-skill.md` for self-healing patterns
+3. Debug with Playwright MCP (`test_debug`, `browser_snapshot`, etc.)
+4. Present diagnosis to the user (root cause + proposed 1-3 line fix)
+5. **STOP** — wait for user to approve the fix
+6. Apply fix and re-run
+7. If still failing, mark `test.fixme()` and classify as defect
 
 ### Phase 5: Report
 User says: *"Generate the report"*
 1. User runs `npm run qa:report` (or you suggest it)
-2. Present the report summary to the user
+2. Or generate Allure report: `npm run qa:report:allure`
+3. Or open the QA Dashboard: `npm run dashboard`
+4. Present the report summary to the user
 
 ---
 
@@ -92,9 +99,12 @@ User says: *"Generate the report"*
 
 | User intent | Read this |
 |------------|-----------|
+| General QA / test writing best practices | `.opencode/qa-workflow-skill.md` |
 | "Plan tests / Explore the app / Write a test plan" | `.github/agents/playwright-test-planner.agent.md` |
 | "Generate tests / Write test code / Create spec files" | `.github/agents/playwright-test-generator.agent.md` + `prompts/QAe2eprompt.md` |
 | "Fix failing tests / Debug / Heal" | `.github/agents/playwright-test-healer.agent.md` |
+| Allure / Dashboard / Reporting | `.opencode/qa-workflow-skill.md` |
+| Applitools visual testing | `.opencode/qa-workflow-skill.md` |
 | General QA requests | `prompts/general_prompt.md` |
 
 ---

package/test-results/run-2026-05-18T14-51-36/final-test-report.md

@@ -1,9 +1,18 @@
 # AI QA Execution Report
 
 **Run ID**: run-2026-05-18T14-51-36
-**Generated**: 2026-05-18T14:51:45.958Z
+**Generated**: 2026-06-09T15:03:06.572Z
 **Status**: ✅ PASSED
 
+
+---
+
+## Traceability
+
+No traceability data available.
+
+
+
 ---
 
 ## Executive Summary
@@ -23,7 +32,6 @@
 
 | Test File | Scenarios |
 |-----------|-----------|
-| us-expense-01.spec.ts | 1 |
 
 ## Self-Healing Activity
 

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "types": ["node"]
+  }
+}