@avi770/testteam 3.0.0 → 3.2.0

package/core/report-html.ts

@@ -1,657 +0,0 @@
-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');
-}