@avi770/testteam 1.2.0

package/core/report-html.ts

@@ -0,0 +1,657 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import type { RunState, AgentResult, Finding, FindingSeverity, Phase, PhaseGateResult } from './types';
+
+/** Overall verdict derived from gate results. */
+type Verdict = 'PASS' | 'CONDITIONAL' | 'FAIL';
+
+/** Determine the overall verdict from phase gate results. */
+function determineVerdict(gateResults: PhaseGateResult[]): Verdict {
+  const hasBlockingFailures = gateResults.some(
+    (g) => g.failedBlockingAgents.length > 0,
+  );
+  if (hasBlockingFailures) return 'FAIL';
+
+  const hasAdvisoryFailures = gateResults.some((g) =>
+    g.advisoryResults.some((r) => r.status === 'failed'),
+  );
+  if (hasAdvisoryFailures) return 'CONDITIONAL';
+
+  return 'PASS';
+}
+
+/** Format milliseconds into a human-readable duration string. */
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  const seconds = Math.floor(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}m ${remainingSeconds}s`;
+}
+
+/** Compute total duration from all agent results. */
+function computeTotalDuration(agentResults: Map<number, AgentResult>): number {
+  let total = 0;
+  for (const result of agentResults.values()) {
+    total += result.durationMs;
+  }
+  return total;
+}
+
+/** Escape HTML special characters. */
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+/** Map verdict to CSS class suffix. */
+function verdictClass(verdict: Verdict): string {
+  switch (verdict) {
+    case 'PASS': return 'pass';
+    case 'CONDITIONAL': return 'warn';
+    case 'FAIL': return 'fail';
+  }
+}
+
+/** Map agent status to CSS class suffix. */
+function statusClass(status: AgentResult['status']): string {
+  switch (status) {
+    case 'passed': return 'pass';
+    case 'failed': return 'fail';
+    case 'skipped': return 'skip';
+    case 'running': return 'warn';
+    case 'pending': return 'skip';
+  }
+}
+
+/** Map severity to CSS class suffix. */
+function severityClass(severity: FindingSeverity): string {
+  switch (severity) {
+    case 'critical': return 'fail';
+    case 'high': return 'fail';
+    case 'medium': return 'warn';
+    case 'low': return 'pass';
+    case 'info': return 'info';
+  }
+}
+
+/** Map phase gate passed boolean to CSS class suffix. */
+function phaseClass(gate: PhaseGateResult | undefined): string {
+  if (!gate) return 'skip';
+  if (!gate.passed) return 'fail';
+  const hasAdvisoryFail = gate.advisoryResults.some((r) => r.status === 'failed');
+  if (hasAdvisoryFail) return 'warn';
+  return 'pass';
+}
+
+/** Ordered severity levels for grouping findings. */
+const SEVERITY_ORDER: readonly FindingSeverity[] = ['critical', 'high', 'medium', 'low', 'info'] as const;
+
+/** The four phases in pipeline order. */
+const PHASE_ORDER: readonly Phase[] = ['alpha', 'beta', 'uat', 'release'] as const;
+
+/** Determine the agent tier label based on agentId convention. */
+function agentTier(agentId: number): string {
+  if (agentId <= 3) return 'core';
+  if (agentId <= 9) return 'specialist';
+  if (agentId <= 15) return 'advanced';
+  return 'extended';
+}
+
+function buildCss(): string {
+  return `
+    :root {
+      --bg: #1a1b26;
+      --bg-surface: #24283b;
+      --bg-surface2: #2f3349;
+      --text: #c0caf5;
+      --text-muted: #565f89;
+      --border: #3b4261;
+      --pass: #9ece6a;
+      --warn: #e0af68;
+      --fail: #f7768e;
+      --info: #7aa2f7;
+      --skip: #565f89;
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+      padding: 2rem;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    h1, h2, h3 { font-weight: 600; }
+    h1 { font-size: 1.8rem; margin-bottom: 0.5rem; }
+    h2 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
+
+    .header {
+      background: var(--bg-surface);
+      border-radius: 8px;
+      padding: 1.5rem 2rem;
+      margin-bottom: 2rem;
+      border: 1px solid var(--border);
+    }
+
+    .header-meta {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 0.75rem;
+      margin-top: 1rem;
+    }
+
+    .header-meta dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
+    .header-meta dd { font-size: 1rem; font-weight: 500; }
+
+    .badge {
+      display: inline-block;
+      padding: 0.15rem 0.6rem;
+      border-radius: 4px;
+      font-size: 0.8rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+      cursor: default;
+    }
+    .badge-pass { background: color-mix(in srgb, var(--pass) 20%, transparent); color: var(--pass); }
+    .badge-warn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
+    .badge-fail { background: color-mix(in srgb, var(--fail) 20%, transparent); color: var(--fail); }
+    .badge-skip { background: color-mix(in srgb, var(--skip) 20%, transparent); color: var(--skip); }
+    .badge-info { background: color-mix(in srgb, var(--info) 20%, transparent); color: var(--info); }
+
+    /* Severity filter badges */
+    .filter-badge { cursor: pointer; user-select: none; }
+    .filter-badge:hover { opacity: 0.8; }
+    .filter-badge.active { outline: 2px solid currentColor; outline-offset: 2px; }
+
+    .section {
+      background: var(--bg-surface);
+      border-radius: 8px;
+      padding: 1.5rem 2rem;
+      margin-bottom: 2rem;
+      border: 1px solid var(--border);
+    }
+
+    /* Phase gate pipeline */
+    .pipeline {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0;
+      flex-wrap: wrap;
+      margin-top: 1rem;
+    }
+
+    .phase-node {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .phase-circle {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      font-size: 0.7rem;
+      text-transform: uppercase;
+    }
+    .phase-circle-pass { background: var(--pass); color: var(--bg); }
+    .phase-circle-warn { background: var(--warn); color: var(--bg); }
+    .phase-circle-fail { background: var(--fail); color: var(--bg); }
+    .phase-circle-skip { background: var(--bg-surface2); color: var(--text-muted); border: 2px dashed var(--border); }
+
+    .phase-label {
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-muted);
+    }
+
+    .phase-arrow {
+      width: 40px;
+      height: 2px;
+      background: var(--border);
+      margin: 0 0.25rem;
+      margin-bottom: 1.5rem;
+    }
+
+    /* Table */
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.9rem;
+    }
+    thead th {
+      text-align: left;
+      padding: 0.75rem;
+      border-bottom: 2px solid var(--border);
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-muted);
+    }
+    tbody td {
+      padding: 0.6rem 0.75rem;
+      border-bottom: 1px solid var(--border);
+      vertical-align: top;
+    }
+    tbody tr:hover { background: var(--bg-surface2); }
+
+    /* Collapsible sections — pure CSS */
+    .collapsible > input[type="checkbox"] { display: none; }
+    .collapsible > label {
+      display: block;
+      cursor: pointer;
+      user-select: none;
+      padding: 0.5rem 0;
+      font-weight: 600;
+    }
+    .collapsible > label::before {
+      content: '\\25B6';
+      display: inline-block;
+      margin-right: 0.5rem;
+      font-size: 0.7rem;
+      transition: transform 0.15s;
+    }
+    .collapsible > input:checked + label::before {
+      transform: rotate(90deg);
+    }
+    .collapsible > .content {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.2s ease-out;
+    }
+    .collapsible > input:checked ~ .content {
+      max-height: 5000px;
+    }
+
+    /* Agent detail rows */
+    .agent-detail {
+      background: var(--bg);
+      border-radius: 4px;
+      padding: 0.75rem;
+      margin: 0.5rem 0;
+      font-size: 0.85rem;
+    }
+    .agent-detail p { margin-bottom: 0.25rem; }
+
+    /* Findings */
+    .finding-card {
+      background: var(--bg);
+      border-radius: 6px;
+      padding: 1rem;
+      margin-bottom: 0.75rem;
+      border-left: 3px solid var(--border);
+    }
+    .finding-card-critical { border-left-color: var(--fail); }
+    .finding-card-high { border-left-color: var(--fail); }
+    .finding-card-medium { border-left-color: var(--warn); }
+    .finding-card-low { border-left-color: var(--pass); }
+    .finding-card-info { border-left-color: var(--info); }
+
+    .finding-header {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.5rem;
+    }
+    .finding-desc { font-size: 0.9rem; margin-bottom: 0.25rem; }
+    .finding-meta { font-size: 0.8rem; color: var(--text-muted); }
+
+    .filter-bar { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
+
+    /* Print styles */
+    @media print {
+      body { background: #fff; color: #222; padding: 1rem; }
+      .section, .header { background: #f9f9f9; border-color: #ddd; }
+      .badge-pass { background: #d4edda; color: #155724; }
+      .badge-warn { background: #fff3cd; color: #856404; }
+      .badge-fail { background: #f8d7da; color: #721c24; }
+      .badge-info { background: #d1ecf1; color: #0c5460; }
+      .collapsible > .content { max-height: none !important; }
+    }
+
+    .empty-state {
+      text-align: center;
+      padding: 2rem;
+      color: var(--text-muted);
+      font-style: italic;
+    }
+  `;
+}
+
+function buildJs(): string {
+  return `
+    document.addEventListener('DOMContentLoaded', function() {
+      var filterBadges = document.querySelectorAll('.filter-badge');
+      var findingCards = document.querySelectorAll('.finding-card');
+      var activeFilters = new Set();
+
+      filterBadges.forEach(function(badge) {
+        badge.addEventListener('click', function() {
+          var severity = this.getAttribute('data-severity');
+          if (!severity) return;
+
+          if (activeFilters.has(severity)) {
+            activeFilters.delete(severity);
+            this.classList.remove('active');
+          } else {
+            activeFilters.add(severity);
+            this.classList.add('active');
+          }
+
+          findingCards.forEach(function(card) {
+            var cardSev = card.getAttribute('data-severity');
+            if (activeFilters.size === 0) {
+              card.style.display = '';
+            } else {
+              card.style.display = activeFilters.has(cardSev) ? '' : 'none';
+            }
+          });
+        });
+      });
+
+      // Expandable agent rows
+      var expandBtns = document.querySelectorAll('.expand-agent');
+      expandBtns.forEach(function(btn) {
+        btn.addEventListener('click', function() {
+          var targetId = this.getAttribute('data-target');
+          if (!targetId) return;
+          var detail = document.getElementById(targetId);
+          if (!detail) return;
+          var isHidden = detail.style.display === 'none' || detail.style.display === '';
+          detail.style.display = isHidden ? 'table-row' : 'none';
+          this.textContent = isHidden ? '\\u25BC' : '\\u25B6';
+        });
+      });
+    });
+  `;
+}
+
+/** Build the phase gate pipeline visualization. */
+function buildPipelineHtml(gateResults: PhaseGateResult[]): string {
+  const gateMap = new Map<Phase, PhaseGateResult>();
+  for (const gate of gateResults) {
+    gateMap.set(gate.phase, gate);
+  }
+
+  const nodes: string[] = [];
+  for (let i = 0; i < PHASE_ORDER.length; i++) {
+    const phase = PHASE_ORDER[i];
+    const gate = gateMap.get(phase);
+    const cls = phaseClass(gate);
+    const icon = cls === 'pass' ? '&#10003;' : cls === 'fail' ? '&#10007;' : cls === 'warn' ? '!' : '&#8212;';
+
+    nodes.push(`
+      <div class="phase-node">
+        <div class="phase-circle phase-circle-${cls}">${icon}</div>
+        <span class="phase-label">${escapeHtml(phase)}</span>
+      </div>
+    `);
+
+    if (i < PHASE_ORDER.length - 1) {
+      nodes.push('<div class="phase-arrow"></div>');
+    }
+  }
+
+  return `<div class="pipeline">${nodes.join('')}</div>`;
+}
+
+/** Build the agent results table. */
+function buildAgentTableHtml(agentResults: Map<number, AgentResult>): string {
+  const sorted = Array.from(agentResults.values()).sort((a, b) => a.agentId - b.agentId);
+
+  if (sorted.length === 0) {
+    return '<p class="empty-state">No agent results recorded.</p>';
+  }
+
+  const rows: string[] = [];
+  for (const result of sorted) {
+    const cls = statusClass(result.status);
+    const detailId = `agent-detail-${result.agentId}`;
+    rows.push(`
+      <tr>
+        <td><button class="expand-agent badge badge-info" data-target="${detailId}" style="cursor:pointer;border:none;min-width:1.5rem;">&#9654;</button></td>
+        <td>${result.agentId}</td>
+        <td>${escapeHtml(result.agentName)}</td>
+        <td>${escapeHtml(result.phase)}</td>
+        <td><span class="badge badge-${cls}">${escapeHtml(result.status)}</span></td>
+        <td>${formatDuration(result.durationMs)}</td>
+        <td>${result.findings.length}</td>
+        <td>${agentTier(result.agentId)}</td>
+      </tr>
+      <tr id="${detailId}" style="display:none;">
+        <td colspan="8">
+          <div class="agent-detail">
+            <p><strong>Summary:</strong> ${escapeHtml(result.summary)}</p>
+            ${result.findings.length > 0
+              ? `<p><strong>Findings:</strong></p>
+                 <ul>${result.findings.map((f) => `<li><span class="badge badge-${severityClass(f.severity)}">${escapeHtml(f.severity)}</span> ${escapeHtml(f.module)}: ${escapeHtml(f.description)}</li>`).join('')}</ul>`
+              : '<p>No findings.</p>'}
+          </div>
+        </td>
+      </tr>
+    `);
+  }
+
+  return `
+    <table>
+      <thead>
+        <tr>
+          <th></th>
+          <th>#</th>
+          <th>Name</th>
+          <th>Phase</th>
+          <th>Status</th>
+          <th>Duration</th>
+          <th>Findings</th>
+          <th>Tier</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${rows.join('')}
+      </tbody>
+    </table>
+  `;
+}
+
+/** Build the findings section grouped by severity. */
+function buildFindingsHtml(agentResults: Map<number, AgentResult>): string {
+  const allFindings: Array<Finding & { agentName: string }> = [];
+  for (const result of agentResults.values()) {
+    for (const finding of result.findings) {
+      allFindings.push({ ...finding, agentName: result.agentName });
+    }
+  }
+
+  if (allFindings.length === 0) {
+    return '<p class="empty-state">No findings — all clear.</p>';
+  }
+
+  // Filter bar
+  const severityCounts = new Map<FindingSeverity, number>();
+  for (const f of allFindings) {
+    severityCounts.set(f.severity, (severityCounts.get(f.severity) ?? 0) + 1);
+  }
+
+  const filterBar = `<div class="filter-bar">${
+    SEVERITY_ORDER.map((sev) => {
+      const count = severityCounts.get(sev) ?? 0;
+      if (count === 0) return '';
+      return `<span class="badge badge-${severityClass(sev)} filter-badge" data-severity="${sev}">${sev} (${count})</span>`;
+    }).join('')
+  }</div>`;
+
+  // Group by severity
+  const groups: string[] = [];
+  for (const severity of SEVERITY_ORDER) {
+    const group = allFindings.filter((f) => f.severity === severity);
+    if (group.length === 0) continue;
+
+    const cards = group.map((f) => {
+      const location = f.file
+        ? `${escapeHtml(f.file)}${f.line ? `:${f.line}` : ''}`
+        : '';
+      const evidenceLink = f.screenshot
+        ? `<span class="finding-meta">Evidence: ${escapeHtml(f.screenshot)}</span>`
+        : '';
+
+      return `
+        <div class="finding-card finding-card-${severity}" data-severity="${severity}">
+          <div class="finding-header">
+            <span class="badge badge-${severityClass(severity)}">${escapeHtml(severity)}</span>
+            <span style="font-weight:600;">${escapeHtml(f.module)}</span>
+            <span class="finding-meta">Agent: ${escapeHtml(f.agentName)} (#${f.agentId})</span>
+          </div>
+          <p class="finding-desc">${escapeHtml(f.description)}</p>
+          ${location ? `<p class="finding-meta">Location: ${location}</p>` : ''}
+          ${evidenceLink}
+        </div>
+      `;
+    }).join('');
+
+    const sectionId = `findings-${severity}`;
+    groups.push(`
+      <div class="collapsible">
+        <input type="checkbox" id="${sectionId}" checked>
+        <label for="${sectionId}">${severity.toUpperCase()} (${group.length})</label>
+        <div class="content">${cards}</div>
+      </div>
+    `);
+  }
+
+  return filterBar + groups.join('');
+}
+
+/** Build an optional coverage summary section. */
+function buildCoverageHtml(agentResults: Map<number, AgentResult>): string {
+  // Extract coverage data from known specialist agents if present
+  const coverageAgent = agentResults.get(4);  // Coverage agent
+  const securityAgent = agentResults.get(7);  // Security agent
+  const a11yAgent = agentResults.get(8);      // Accessibility agent
+
+  const items: string[] = [];
+
+  if (coverageAgent) {
+    items.push(`
+      <div>
+        <dt>Unit Coverage</dt>
+        <dd>${escapeHtml(coverageAgent.summary)}</dd>
+      </div>
+    `);
+  }
+
+  if (securityAgent) {
+    items.push(`
+      <div>
+        <dt>Security</dt>
+        <dd><span class="badge badge-${statusClass(securityAgent.status)}">${escapeHtml(securityAgent.status)}</span> ${escapeHtml(securityAgent.summary)}</dd>
+      </div>
+    `);
+  }
+
+  if (a11yAgent) {
+    items.push(`
+      <div>
+        <dt>Accessibility</dt>
+        <dd><span class="badge badge-${statusClass(a11yAgent.status)}">${escapeHtml(a11yAgent.status)}</span> ${escapeHtml(a11yAgent.summary)}</dd>
+      </div>
+    `);
+  }
+
+  if (items.length === 0) {
+    return '<p class="empty-state">No coverage data available.</p>';
+  }
+
+  return `<dl class="header-meta">${items.join('')}</dl>`;
+}
+
+/**
+ * Generates a self-contained HTML report from test run results.
+ *
+ * The output file contains all CSS and JS inline — no external dependencies.
+ * It can be opened directly from the filesystem in any modern browser.
+ */
+export function generateHTMLReport(state: RunState, outputPath: string): void {
+  const verdict = determineVerdict(state.gateResults);
+  const totalDuration = computeTotalDuration(state.agentResults);
+  const commitHash = process.env['GIT_COMMIT'] ?? process.env['GITHUB_SHA'] ?? 'unknown';
+
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>TestTeam Report — ${escapeHtml(state.runId)}</title>
+  <style>${buildCss()}</style>
+</head>
+<body>
+  <div class="header">
+    <h1>TestTeam Report</h1>
+    <dl class="header-meta">
+      <div>
+        <dt>Run ID</dt>
+        <dd>${escapeHtml(state.runId)}</dd>
+      </div>
+      <div>
+        <dt>Date</dt>
+        <dd>${escapeHtml(state.startedAt)}</dd>
+      </div>
+      <div>
+        <dt>Commit</dt>
+        <dd><code>${escapeHtml(commitHash)}</code></dd>
+      </div>
+      <div>
+        <dt>Duration</dt>
+        <dd>${formatDuration(totalDuration)}</dd>
+      </div>
+      <div>
+        <dt>Verdict</dt>
+        <dd><span class="badge badge-${verdictClass(verdict)}">${verdict}</span></dd>
+      </div>
+    </dl>
+  </div>
+
+  <div class="section">
+    <h2>Phase Gate Summary</h2>
+    ${buildPipelineHtml(state.gateResults)}
+  </div>
+
+  <div class="section">
+    <h2>Agent Results</h2>
+    ${buildAgentTableHtml(state.agentResults)}
+  </div>
+
+  <div class="section">
+    <h2>Findings</h2>
+    ${buildFindingsHtml(state.agentResults)}
+  </div>
+
+  <div class="section">
+    <h2>Coverage Summary</h2>
+    ${buildCoverageHtml(state.agentResults)}
+  </div>
+
+  <script>${buildJs()}</script>
+</body>
+</html>`;
+
+  const dir = path.dirname(outputPath);
+  fs.mkdirSync(dir, { recursive: true });
+  fs.writeFileSync(outputPath, html, 'utf-8');
+}